[React] 브라우저 크기 조정 성능 개선

개요

브라우저 창 크기 조정 시 발생하는 끊김 현상을 해결하기 위해 뷰포트 너비 값을 사용하는 구성 요소의 성능을 향상시키는 과정을 함께해 봅니다.

문제 인식

브라우저 창 크기를 조정할 때 끊김 현상이 지속적으로 관찰되었습니다. 이는 사용자 경험을 향상시키기 위해 반드시 해결해야 할 중요한 문제였습니다.

작업 요약

뷰포트 너비 값을 사용하는 구성 요소의 성능을 개선하는 데 중점을 두었습니다. 다음은 작업 과정과 개선 사항에 대한 자세한 요약입니다.

useWindowSize 훅을 사용하는 구성 요소

문제

useWindowSize 훅을 사용하는 각 구성 요소에 대해 이벤트 리스너가 등록되었습니다.

영향

이는 1픽셀 단위로 다시 렌더링이 발생하여 성능 문제가 발생했습니다.

useMediaQuery 훅을 사용하는 구성 요소

문제

서버사이드 렌더링(SSR) 중 수분기 불일치 문제가 발생할 가능성이 있습니다.

라이브러리 제한 사항

라이브러리 문서에서는 제공된 컨텍스트를 사용하여 너비 값을 지정할 수 있다고 설명하지만, 이는 컨텍스트 관리를 필요로 합니다.

UI 불일치

SSR 중 UI 불일치 문제가 여러 번 발생했으며, 이는 수분기 불일치 문제로 추정됩니다.

임시 해결책

useIsClient 훅을 임시 해결책으로 사용하여 이러한 문제를 완화했습니다.

반응형

새로운 솔루션: useViewportWidth 훅

이 문제를 해결하기 위해, React 18에서 도입된 useSyncExternalStore 훅을 사용하여 window.innerWidth 변화에 효율적으로 대응하는 새로운 훅 useViewportWidth를 만들었습니다.

공식 문서

useSyncExternalStore 훅은 브라우저 API에 구독할 때 사용하도록 권장됩니다.

사용 예

const isMobile = useViewportWidth((width) => width <= 767);

개선 사항

1. 단일 리사이즈 이벤트 리스너

윈도우에 단일 리사이즈 이벤트 리스너만 등록하도록 최적화했습니다.

2. 효율적인 다시 렌더링

셀렉터를 사용하여 셀렉터가 반환하는 값에 따라 변경 사항을 감지하여 불필요한 다시 렌더링을 줄였습니다.

3. SSR 호환성

서버 측에서는 null을 반환하므로 훅을 사용하는 구성 요소에서 별도로 처리할 수 있어 SSR 문제가 발생하지 않습니다.

리팩토링

리팩토링

-   `useMediaQuery` 사용 부분을 `useViewportWidth`로 변경했습니다.
-   `useWindowSize`를 `useViewportWidth`로 변경했습니다.
-   임시로 처리했던 `useIsClient` 부분을 제거했습니다.

성능 비교

AS-IS

리사이즈 이벤트 실행 시간이 171밀리초였습니다.

적용 전 시간

TO-BE

리사이즈 이벤트 실행 시간이 12밀리초로 감소했습니다.

적용 후 시간

결론

이러한 개선을 통해 뷰포트 너비 값을 사용하는 구성 요소의 성능을 크게 향상시켜 브라우저 리사이즈 이벤트 중에 더욱 원활하고 반응성이 높은 사용자 경험을 제공할 수 있게 되었습니다. 이러한 변경 사항은 리사이즈 이벤트의 실행 시간을 171밀리초에서 12밀리초로 크게 줄이는 최적화를 반영합니다.