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

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

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

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

좋은 협업자가 되려면 어떻게 해야 할까요? 좋은 협업은 뭘까요?
정답은 없겠지만, 제가 겪은 시행착오와 그에 비롯한 생각들을 적어봅니다.

exhaustiveness check 를 할 경우, 예상치 못한 런타임 에러를 미연에 방지할 수 있게 됩니다.

평소 API 반환값을 추론하기 위해 어떤 방식을 사용하시나요?
Schema Validation Layer 를 추가하면 메인 로직을 깔끔하게 관리할 수 있습니다. (부제: zod 나 superstruct 를 사용해보아요.)

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

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

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