jineecode

- 애플리케이션 로직과 뷰(UI)를 분리한 패턴 - UI 구분이 쉬워지며 모킹, 스토리북을 더 쉽게 사용할 수 있습니다. Presentational Components : 데이터가 사용자에게 어떻게 보여지는지 신경쓰는 컴포넌트. 즉, UI. Container Components : 어떤 데이터가 사용자에게 보여 지는지 신경쓰는 컴포넌트 . 즉, API 통신 등을 담당. Container Components import { useState, useEffect } from "react"; export default function useDogImages() { const [dogs, setDogs] = useState([]); useEffect(() => { async function fetchDogs() ..

네트워크 요청이 실패하면 이상적으로는 쿼리가 오류 상태가 되기를 원할 것입니다. 그렇게 하지 않고 대신 성공한 쿼리가 표시 된다면 이는 queryFn 이 실패한 Promise를 반환하지 않았음을 의미합니다. React Query는 상태 코드나 네트워크 요청에 대해 전혀 알지 못합니다(또는 신경 쓰지 않습니다). queryFn 이 제공 해야 하는 해결되거나 거부된 Promise가 필요합니다. React Query가 거부된 Promise를 발견하면 잠재적으로 재시도를 시작하고 오프라인인 경우 쿼리를 일시 중지하고 결국 쿼리를 오류 상태로 만들 수 있으므로 올바르게 수행하는 것이 매우 중요합니다. 오류를 올바르게 처리하려면 React Query에서 거부(rejected)된 Promise가 필요합니다. 운 좋게..

앱의 수명당 한 번만 초기화하려는 리소스가 있다고 가정합니다. 권장되는 패턴은 일반적으로 구성 요소 외부 에 인스턴스를 만드는 것 입니다. 이것은 일반적으로 redux store과 같이 앱 당 한 번 필요한 리소스에 적합합니다. import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient() function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; 그러나 구성요소를 여러 번 마운트..

v4.0 "@tanstack/react-query": "4.0.10", 문제: useQuery로 API 통신 시, Missing queryFn 표출됨 API에는 문제가 없었음. import axios from 'axios'; import { useQuery } from '@tanstack/react-query'; import { fetchPosts } from '@src/api/getPosts'; const PostList = () => { const { data, isLoading, isError, error } = useQuery('post', fetchPosts); if (isLoading) { return Loading...; } if (isError) { return Error: {error};..

연관이 있는 import type ! import type {FC, ComponentProps, ForwardRefRenderFunction} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; ComponentProps React(-Native)의 특정 컴포넌트에서 쓰이는 props 의 타입들을 별도의 타입으로 선언해서 사용하고 싶으면 아래와 같이 작성. export type TextInputProps = ComponentProps; // EX export type TextInputProps = ComponentProps; export const Inputs: FC = () => { return ; }; 위 값을 상속받아 다른 값..

TypeScript 3.8은 타입-전용 imports, exports를 위한 새로운 구문이 추가되었습니다. import type은 타입 표기와 선언에 사용될 선언만 import 합니다. 이는 항상 완전히 제거되므로, 런타임에 남아있는 것은 없습니다. 마찬가지로, export type은 타입 문맥에 사용할 export만 제공하며, 이 또한 TypeScript의 출력물에서 제거됩니다. import type { SomeThing } from "./some-module.js"; export type { SomeThing }; 클래스는 런타임에 값을 가지고 있고 디자인-타임에 타입이 있으며 사용은 상황에-따라 다르다는 것을 유의해야 합니다. 클래스를 import 하기 위해 import type을 사용하면, 확장 ..

빌드 실패 이슈 FAILURE: Build failed with an exception. * Where: Build file '/Users/niege/todoRN/android/app/build.gradle' line: 1 * What went wrong: A problem occurred evaluating project ':app'. > Failed to apply plugin 'com.android.internal.application'. > Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8. You can try some of the following options: - changing the IDE se..

react-native가 제공해주는 ListRenderItem 을 사용하면 됩니다. import {FlatList, ListRenderItem} from 'react-native'; interface AddrProps { jibunAddr: string; roadAddr: string; roadAddrPart1: string; } const Addr = () => { const renderItem: ListRenderItem = ({item}) => { return ( { navigation.navigate(navigate, { jibun: item.jibunAddr, }); }}> {item.jibunAddr} {item.roadAddr} ); }; ... }