React Custom Hook: 고성능 `useWindowSize` Hook 점진적 최적화 및 React 18 `useSyncExternalStore` 활용

핵심 기술

이 콘텐츠는 React 환경에서 창 크기 변경에 따라 컴포넌트의 동작을 동적으로 조절하는 useWindowSize 커스텀 훅을 점진적으로 개발하고 최적화하는 방법을 다룹니다. 특히 SSR 호환성, 의존성 추적 기반의 성능 최적화, 그리고 React 18의 useSyncExternalStore API 활용에 초점을 맞춥니다.

기술적 세부사항

• 기본 구현: useState와 useEffect를 사용하여 window.innerWidth, window.innerHeight를 구독하고 리사이즈 이벤트에 따라 상태를 업데이트하는 초기 버전을 제시합니다.
• SSR 호환성: 서버 렌더링 시 window 객체가 존재하지 않아 발생하는 Hydration Mismatch 문제를 해결하기 위해 초기 상태를 0으로 설정하고 클라이언트에서 즉시 업데이트하는 기법을 소개합니다.
• 의존성 추적 (Dependency Tracking): 컴포넌트가 width 또는 height 중 특정 속성만 사용하는 경우, 해당 속성이 변경될 때만 리렌더링되도록 useRef를 사용하여 접근한 속성을 추적하는 방식을 구현합니다. 이는 불필요한 리렌더링을 방지하는 핵심 기법입니다.
• useSyncExternalStore 활용: React 18에서 도입된 useSyncExternalStore를 사용하여 외부 스토어(이 경우, 브라우저 창 크기)와 React 상태를 더 효율적이고 동시성(concurrent)에 안전하게 동기화하는 방법을 보여줍니다. 이는 구독(subscribe), 상태 가져오기(getSnapshot), 선택적 비교(isEqual) 기능을 포함합니다.
• 타입 안전성: TypeScript를 사용하여 WindowSize 및 StateDependencies 인터페이스를 정의하고, useWindowSize 함수의 타입을 명확하게 지정하여 개발 경험을 향상시킵니다.
• 설계 원칙: 단순함에서 시작하여 점진적으로 문제를 해결하고, SSR 이슈, 성능 최적화, 최신 API 활용, 타입 안전성을 고려하는 개발 과정을 따릅니다.
• 실제 사용 예시: MyComponent, WidthOnlyComponent, ResponsiveLayout 컴포넌트에서 useWindowSize 훅을 활용하는 방법을 보여주며, 특히 width만 사용하는 컴포넌트는 height 변경 시 리렌더링되지 않음을 강조합니다.

개발 임팩트

• 성능 향상: 불필요한 리렌더링 최소화, 동일한 이벤트 리스너 공유, 메모리 효율성 증대를 통해 애플리케이션의 전반적인 성능을 개선합니다.
• 개발 편의성: 반응형 UI 구현, 조건부 렌더링, 화면 크기에 따른 동적 계산 등을 위한 견고하고 재사용 가능한 훅을 제공합니다.
• 안정성: SSR 환경에서의 안정성과 React의 동시성 기능과의 호환성을 보장합니다.

커뮤니티 반응

(원문에서 직접적인 커뮤니티 반응 언급은 없으나, useSyncExternalStore와 같은 최신 React 기능의 활용은 개발자 커뮤니티에서 높은 관심을 받을 만한 주제입니다.)