React

Next.js 13에서 Server Component를 도입하면서 클라이언트 상태와 서버 렌더링 간 불일치로 hydration 에러가 발생했다. 원인은 Date 객체의 timezone 차이였고, ISO string으로 직렬화해서 해결했다.

대용량 리스트 필터링 시 입력 지연 문제를 useTransition으로 해결했다. startTransition을 통해 긴급하지 않은 상태 업데이트를 분리하여 UX를 개선할 수 있었다.

대용량 리스트 검색에서 입력 지연 문제를 겪었다. React 18의 useTransition을 적용해 사용자 입력은 즉각 반영하면서 무거운 렌더링을 낮은 우선순위로 처리하도록 개선했다.

레거시 프로젝트를 React 18로 마이그레이션하면서 useTransition을 활용해 대용량 데이터 렌더링 성능을 개선했다. 특히 검색 필터링 시 UI 블로킹 문제를 해결할 수 있었다.

대용량 검색 필터 페이지에서 입력 지연 문제가 발생했다. React 18의 useDeferredValue를 적용해 렌더링 우선순위를 조정하고 UX를 개선한 과정을 기록한다.

대용량 목록 검색 시 입력 지연 문제를 React 18의 useTransition으로 해결했다. startTransition으로 우선순위를 분리하니 입력은 즉각 반응하고 목록 렌더링은 백그라운드에서 처리되었다.

관리자 페이지의 대용량 테이블 검색에서 입력 지연 문제가 발생했다. React 18의 useTransition을 적용해 긴급 업데이트와 전환 업데이트를 분리하여 해결한 과정을 정리했다.

대용량 목록 필터링 시 입력 지연 문제를 useDeferredValue로 해결했다. debounce보다 직관적이고 React의 우선순위 시스템을 활용할 수 있었다.

React 18 업그레이드 후 Concurrent Rendering을 실제 프로덕션에 적용했다. useTransition과 useDeferredValue를 활용해 검색 UX를 개선한 과정을 기록한다.

React 18이 정식 출시된 지 몇 개월이 지났다. Suspense for Data Fetching을 실무에 적용하면서 겪은 시행착오와 패턴을 정리했다.