React 주제로 쓴 글 9편

React

가상의 매장 관리 화면에서 데이터가 언제 낡고 지워지는지부터, 목록 이동과 변경 요청 뒤 어떤 쿼리를 다시 읽을지까지 TanStack Query v5로 따라갑니다.

Next.js 패키지에 포함된 문서를 기준으로 요청 병렬화, 캐시, 번들 분리, 스트리밍을 예제에 적용하고 변경 전후의 측정값을 비교합니다.

삭제 버튼을 눌렀는데 부모 항목까지 열리는 예제로, 브라우저의 이벤트 전파와 React가 onClick 핸들러를 실행하는 순서를 소스 코드에서 확인합니다.

실제 프로젝트에 FSD를 적용하며 Feature가 페이지별로 늘어나고 모델·API의 위치도 애매해졌습니다. 주문 코드에서 경계를 다시 정한 과정을 담았습니다.

배송지 입력 예제에서 카카오 주소 검색 SDK와 배송 가능 지역 판단이 컴포넌트에 섞이는 과정을 따라가며, 책임과 의존 방향을 차례로 정리합니다.

Zustand의 create가 상태와 구독자를 관리하는 코드부터 useStore가 React 컴포넌트를 스토어에 연결하는 코드까지 따라갑니다.

기능이 뒤섞인 기존 테이블을 정리하고, 가상화로 DOM 노드를 줄인 뒤 컴파운드 컴포넌트로 사용 방식을 다시 설계했습니다.

요구사항마다 props가 늘어나던 공통 컴포넌트를 HTML 속성 상속과 합성 패턴으로 고치고, 폴더 구조와 Storybook까지 정리한 과정입니다.

iOS와 Android의 브릿지 호출 방식을 통합하고, 웹뷰가 준비되기 전에 도착한 이벤트를 놓치지 않도록 큐를 둔 과정을 다룹니다.