[React] React Compiler
React Compiler는 빌드 시간에 컴포넌트와 훅을 자동으로 메모이제이션하는 도구입니다. useMemo, useCallback, memo를 직접 쓰지 않아도 불필요한 리렌더링과 재계산을 줄여 줍니다. 컴파일러가 코드를 어떻게 바꾸는지, 언제 컴파일을 건너뛰는지, 프로젝트에 어떻게 적용하는지 살펴봅니다.
[React] Server Components
React Server Components는 서버에서만 실행되는 컴포넌트입니다. 클라이언트로 전달되는 JavaScript 번들을 줄이고, 데이터가 있는 곳에서 바로 렌더링할 수 있게 해 줍니다. 서버 컴포넌트와 클라이언트 컴포넌트가 어떻게 나뉘고, 어떤 원리로 동작하는지 살펴봅니다.
[React] Reference
React에서 DOM에 접근하기 위해 사용되는 것이 ref입니다. ref는 <div ref={divRef}>...</div>와 같이 속성처럼 사용되지만 속성과는 다른 의미를 가지고 있습니다.
[React] TanStack Query v5 (React Query) API 레퍼런스
2023년 10월 TanStack Query v5가 정식 버전으로 릴리즈 되었습니다. 이번 포스터에서는 TanStack Query v5의 React Query를 멋있게 사용할 수 있도록 React Query의 API를 살펴보도록 하겠습니다.
[React] Suspense
Suspense는 컴포넌트가 화면에 노출하기 위해 필요한 데이터가 아직 준비되지 않았다고 알려주는 기능으로 React 16.6 버전에서 실험적 기능으로 등장해 18 버전에서 정식 지원을 시작한 기능입니다.
[React] Concurrent Rendering - 동시성 렌더링
React 18에서 추가된 기능 중 가장 중요한 것이 사용자 경험을 향상할 수 있는 동시성 렌더링입니다. 이번 포스트에서는 동시성이 무엇인지 그리고 동시성을 위해 추가된 startTransition 함수와 useTransition, useDeferredValue 훅을 살펴보도록 하겠습니다.
[React] react-hook-form API 레퍼런스
사용하고 있는 외부 라이브러리 API를 자세히 알면 그 라이브러리에서 제공하는 다양한 기능들을 인지하고 사용할 수 있기 때문에 라이브러리를 더 멋있게 사용할 수 있습니다. 이번 포스트에서는 React Hook Form을 좀 더 멋있게 사용하기 위해 React Hook Form에서 제공하는 API들을 살펴보도록 하겠습니다.
[React] react-hook-form으로 폼 관리하기
React Hook Form은 사용자 입력을 받고 검증하는 것을 도와 주는 라이브러리로, React에서 폼을 관리하는 가장 유명한 라이브러리 중 하나입니다. React Hook Form을 사용하면 사용자에게 입력을 받고 검증하는데 드는 시간을 줄일 뿐만 아니라 더불어 성능까지 두 마리 토끼를 모두 잡을 수 있습니다.
[React] react-hook-form, formik, rc-field-form 폼 관리 어떤걸로 해야 할까
FrontEnd 개발을 하다보면 사용자 입력을 받고 입력 받은 값을 검증하는데에 많은 시간을 쓰게 되는데, 폼 관리 라이브러리를 사용하게 되면 사용자에게 입력을 받고 검증하는데 드는 시간과 노력을 줄일 수 있습니다.
[React] TanStack Query v4 (React Query)
TanStack Query는 비동기 작업 처리를 돕는 라이브러리입니다. v3까지는 React Query라는 이름으로 React만 지원했는데, v4 부터 React 이외의 프레임워크(Vue, Svelte, Solid)에서 사용할 수 있도록 업데이트 되며 TanStack Query로 이름이 변경되었습니다.