Frontend

React 18 베타가 공개되면서 Suspense를 데이터 페칭에 본격적으로 사용할 수 있게 되었다. 기존 프로젝트에 실험적으로 적용하면서 겪은 문제와 해결 과정을 정리했다.

React 18 RC 버전을 테스트하면서 개발 환경에서 useEffect가 두 번 실행되는 현상을 발견했다. Strict Mode의 새로운 동작 방식과 대응 방법을 정리했다.

React 18 beta를 프로젝트에 적용해보면서 확인한 주요 변경사항과 마이그레이션 포인트를 정리했다. Concurrent Rendering과 Automatic Batching이 핵심이지만, 실제로는 breaking change가 생각보다 많지 않았다.

프로젝트에서 API 경로 문자열을 하드코딩하다가 오타로 인한 버그를 여러 번 겪었다. TypeScript 4.5의 Template Literal Types를 활용해 컴파일 타임에 경로 오류를 잡을 수 있게 개선했다.

React 18 beta가 공개되어 사이드 프로젝트에 적용해봤다. Automatic Batching과 useTransition을 중심으로 실제 동작을 확인했고, 기존 코드와의 호환성도 체크했다.

React 18 Beta를 프로젝트에 도입하면서 Automatic Batching으로 인한 렌더링 최적화를 경험했다. 기존에 수동으로 처리하던 상태 업데이트 최적화가 자동으로 처리되면서 코드가 간결해졌다.

TypeScript 4.5에서 강화된 템플릿 리터럴 타입을 활용해 API 라우트의 타입 안정성을 높였다. 런타임 에러를 컴파일 타임에 잡아낼 수 있게 되어 REST API 호출 시 발생하던 오타 문제가 해결되었다.

React 18 베타를 프로젝트에 적용하며 Concurrent Rendering과 Automatic Batching을 테스트했다. startTransition과 useDeferredValue로 복잡한 리스트 렌더링 성능을 개선한 과정을 기록한다.

React 18 Beta를 테스트하면서 Automatic Batching의 동작 방식을 확인했다. 기존 이벤트 핸들러 외에도 Promise, setTimeout 내부에서도 배칭이 적용되어 리렌더링 횟수가 줄어드는 것을 확인했다.

React 18 베타가 공개되면서 Concurrent Rendering을 실제 프로젝트에 적용해봤다. useTransition과 useDeferredValue를 사용해 무거운 리스트 렌더링 성능을 개선한 과정을 기록한다.