React

React 18의 Concurrent Rendering을 프로덕션에 적용하면서 겪은 시행착오를 정리했다. useTransition과 useDeferredValue를 활용해 검색 UI의 체감 성능을 개선한 과정을 기록한다.

Next.js 13에서 정식 지원되기 시작한 React Server Components를 프로젝트에 도입하려 했으나, 생태계 성숙도와 마이그레이션 비용 문제로 보류하게 되었다. 실제 검토 과정에서 마주친 제약사항들을 정리한다.

Next.js 13 app 디렉토리를 프로덕션에 적용하기 위해 RSC를 학습했다. 기존 CSR 중심 사고방식에서 벗어나는 과정이 쉽지 않았지만, 번들 사이즈와 초기 로딩 속도 개선 효과는 확실했다.

대량의 검색 결과를 렌더링하는 페이지에서 입력 지연 문제가 발생했다. React 18의 useDeferredValue를 적용해 입력 반응성을 개선한 과정을 정리했다.

Next.js 13에서 정식 지원하는 React Server Components를 팀 프로젝트에 도입할지 검토했다. 번들 사이즈 감소는 매력적이지만 아직은 시기상조라는 결론을 내렸다.

대용량 리스트 필터링에서 입력 지연 문제를 겪었다. React 18의 useTransition을 적용해 사용자 입력은 즉각 반응하고, 무거운 렌더링은 뒤로 미뤄 UX를 개선했다.

대용량 리스트 필터링에서 입력 지연 문제를 겪었다. React 18의 useTransition을 도입해 우선순위 기반 렌더링으로 해결한 과정을 기록한다.

프로젝트를 React 18로 업그레이드하며 Concurrent 렌더링을 도입했다. useTransition과 useDeferredValue를 실제 업무에 적용한 경험을 정리했다.

검색 결과 3000개 렌더링 시 입력 지연 문제를 useTransition으로 해결했다. startTransition으로 업데이트 우선순위를 조정해 UX를 개선한 과정을 정리한다.

프로젝트에 React 18을 적용하면서 Concurrent Rendering으로 인해 발생한 예상치 못한 사이드 이펙트들을 정리했다. useEffect 이중 실행과 외부 라이브러리 호환성 문제가 주요 이슈였다.