React

대용량 리스트 검색 기능에서 입력 지연 문제가 발생했다. React 18의 useTransition을 적용해 UI 응답성을 개선한 과정을 기록한다.

3월에 출시된 React 18을 프로덕션에 적용했다. Concurrent Rendering과 Automatic Batching이 주요 변경점이었는데, 실제 마이그레이션 과정에서 마주친 이슈들을 정리한다.

React 18로 마이그레이션하면서 자동 배칭이 기존 상태 업데이트 로직에 미친 영향을 정리했다. setTimeout과 Promise 내부의 여러 setState가 하나로 묶이면서 예상치 못한 렌더링 최적화가 발생했다.

3월에 정식 출시된 React 18을 프로젝트에 적용했다. Automatic Batching과 Suspense 개선이 체감되는 부분이 많았고, 마이그레이션은 생각보다 순조로웠다.

React 18의 Concurrent Features를 적용하여 5000개 이상의 아이템을 렌더링하는 대시보드 성능을 개선했다. useTransition과 useDeferredValue를 활용한 실제 사례를 정리했다.

React 18이 정식 릴리즈되면서 Suspense for Data Fetching과 Server Components를 프로젝트에 적용해봤다. 아직 프로덕션에 쓰기엔 이르지만, 방향성은 명확해 보인다.

회사 프로젝트에 React 18을 도입하면서 useTransition 훅을 사용해 검색 인터페이스의 사용자 경험을 개선했다. 입력 응답성과 결과 렌더링의 우선순위를 분리하는 방법을 정리한다.

React 18로 마이그레이션하면서 Concurrent Rendering 기능을 실무에 적용했다. useTransition과 useDeferredValue를 활용해 검색 필터링 성능을 개선한 과정을 정리했다.

React 18로 업그레이드 후 개발 환경에서 useEffect가 두 번 실행되는 현상을 발견했다. Strict Mode의 새로운 동작 방식과 대응 방법을 정리했다.

3월에 출시된 React 18을 프로덕션에 적용했다. Concurrent Rendering과 Automatic Batching을 도입하면서 겪은 문제와 성능 개선 결과를 정리한다.