"React" 태그로 연결된 6개 게시물개의 게시물이 있습니다.

Form 을 개발하며 왜 모든 요소에 re-render 가 일어나야 하는지 고민해 본 경험이 있나요?

이 글에선 단순한 리액트 폼 컴포넌트와 Context API, Jotai, React Hook Form 을 사용한 컴포넌트를 비교하며 re-render 비용이 적은 폼 컴포넌트를 만들어 봅니다.

재사용성이 높은 컴포넌트는 어떻게 하면 만들 수 있을까요?

@types/react/index.d.ts 에서 Ref 의 타입 정의를 보면 Bivariance hack for consistent unsoundness with RefObject 란 주석이 있습니다. 이 문장이 뜻하는 바에 대해 알아봅시다.

어느 순간 useReducer 를 잊고 개발하고 있었습니다.
useReducer 를 사용하면 복잡한 상태 로직을 깔끔하게 관리할 수 있습니다.

useState 는 초기값을 첫 호출시에만 사용합니다. 초기값 할당을 위해 소모되는 비용이 큰 함수라면 함수 레퍼런스나 익명 함수로 렌더링 지연을 방지할 수 있습니다.

컴포넌트를 a tag 로 만들고 useLinkClickHandler 를 활용한 컴포넌트를 만들면 접근성을 준수한 SPA 라우팅 컴포넌트를 만들 수 있습니다.