소비하는 사람에서 생산하는 사람으로

리액트 19 달라진 것들 | 새로운 훅과 기능 한번에 정리해드립니다

리액트 19 달라진 것들 | 새로운 훅과 기능 한번에 정리해드립니다2026년 현재 React 최신 버전은 19.2.4입니다. React 19는 단순한 마이너 업데이트가 아닙니다. 기존에 번거롭게 처리하던 비동기 상태 관리, 폼 처리, 데이터 페칭 방식이 크게 바뀌었습니다.프론트엔드 개발자라면 반드시 알아야 할 React 19의 새로운 훅과 기능들을 실전 예제와 함께 정리해드립니다.🆕 React 19 신규 훅 한눈에 보기훅역할대체 대상useActionState비동기 액션 상태 관리useFormState (폐기)useFormStatus상위 form 상태 접근Context + props drillinguseOptimistic낙관적 UI 업데이트수동 상태 관리use비동기 리소스 읽기useEffect + us..

createPortal lets you render some children into a different part of the DOM 리액트 공식 문서에 따르면, createPortal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다고 되어있다. {createPortal(children, domNode, key?)} Reference createPortal(children, domNode, key?) Parameters children : 리엑트에서 랜더링 할 수 있는 모든것 (ex. JSX, ), string, number 등등 domNode : portal가 바라보는 DOM element가 들어감 key: A unique string or nu..

React-Query ? 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들도록 도와주는 라이브러리 주요 기능 - 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거 - 백그라운드에서 '오래된' 데이터 업데이트 - 무한 스크롤 - API 호출 동기 관리 사용 후 편해진점 - Boilerplate 코드의 감소 (Redux와 상대적으로) - API 요청 수행을 위한 규격화된 방식 제공 - 사용자 경험 향상을 위한 기능 제공 (Window fucus시 서버 상태 동기화 등 간단한 예시 export default function App() { return ( ) } function Example() { const { isLoading, error, data } = useQue..