react

1. 핵심 Hooks 함수 용도 주요 반환값 주요 옵션 useQuery 데이터 조회 (GET) data, isLoading, isError, error, isFetching, refetch queryKey, queryFn, enabled, staleTime, gcTime, retry, select useMutation 데이터 변경 (POST/PUT/DELETE) mutate, mutateAsync, isPending, isSuccess, isError, data, reset mutationFn, onSuccess, onError, onMutate, onSettled useInfiniteQuery 무한 스크롤/페이지네이션 data, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage queryKey, queryFn, initialPageParam, getNextPageParam, getPreviousPageParam useQueryClient QueryClient 인스턴스 접근 queryClient 객체 – useSuspenseQuery Suspense와 함께 사용 data (항상 존재) useQuery와 동일 useQueries 여러 쿼리 동시 실행 쿼리 결과 배열 queries 배열 useIsFetching 현재 fetching 중인 쿼리 수 … 더 읽기

React에서 많이 사용하는 훅에 대해서 테이블로 정리 설명 한다. 훅 이름 기능 설명 주 사용 목적 간단한 예시 useState 상태 값을 만들고 변경할 수 있음 사용자 입력, UI 상태 저장 const [x, setX] = useState(0) useReducer 복잡한 상태 로직을 reducer 함수로 처리함 상태가 여러 단계로 바뀌는 경우 const [state, dispatch] = useReducer(reducer, init) useContext Context … 더 읽기

Deprecated React 19에서는 forwardRef가 더 이상 필요하지 않습니다. 대신 ref를 프로퍼티로 전달하세요. forwardRef는 향후 릴리스에서 더 이상 사용되지 않습니다. 여기에서 자세히 알아보세요. https://react.dev/reference/react/forwardRef 사용 방법 React 19부터 함수 컴포넌트에 대한 프로퍼티로 ref를 사용할 수 있습니다 새로운 함수 컴포넌트에는 더 이상 forwardRef가 필요하지 않으며, 새로운 참조 프로퍼티를 사용하도록 컴포넌트를 자동으로 업데이트하는 코드모드를 게시할 예정입니다. 향후 버전에서는 … 더 읽기

🧠 React에서 useReducer를 사용하는 이유와 TypeScript로 구현하는 방법 현대적인 리액트(React) 애플리케이션에서는 컴포넌트의 상태(state)를 관리할 때 useState 훅을 가장 많이 사용하지만, 상태가 복잡해지거나 여러 상태 값들이 서로 연관되어 있을 경우에는 useReducer 훅을 사용하는 것이 더 적합하며, 이러한 패턴은 Redux와 유사한 액션 기반 상태 관리 방식으로도 확장 가능하다는 점에서 큰 장점을 가집니다. 특히 타입 안정성을 확보하고, 유지보수 … 더 읽기

React 19는 React 18에서 중요한 성능 개선과 새로운 기능이 추가된 버전입니다. 두 버전 간의 주요 차이점을 기능별로 비교해 보겠습니다. 핵심 차이점 기능 React 18 React 19 Concurrent Rendering (동시성 렌더링) useTransition, useDeferredValue 도입 자동 최적화된 동시성 처리 (별도 설정 없이 가능) 비동기 상태 관리 기존 useState, useReducer로 직접 관리 useActionState, useOptimistic 도입 비동기 데이터 가져오기 … 더 읽기