오픈채팅 Lite FE 성능 개선의 모든 것

간단 소개

오픈채팅 Lite FE 성능 개선 사례: 렌더링 최적화, 데이터 처리 개선, 상태 관리 라이브러리 튜닝을 통해 사용자 경험을 향상시킨 과정 분석.

AI Summary

주요 성능 이슈 및 개선 방향
- 오픈채팅 Lite는 많은 사용자가 참여하는 특성상 렌더링 성능이 중요하며, 앱이 느려지는 현상, UI 블로킹, 화면 깜빡임 등의 문제가 발생.
- 가상 스크롤을 통해 DOM 요소 수를 제한하고, React.memo로 리렌더링을 억제하여 성능을 개선.
- 비제어 컴포넌트를 사용하여 React 상태 업데이트를 줄이고, iOS에서 button 태그 대신 span 태그를 사용하여 렌더링 시간을 단축.
데이터 처리 방식 개선
- 서버에서 받는 메시지 데이터를 효율적으로 관리하기 위해 Message Queue를 도입하고, 비동기 처리를 통해 콜 스택 과부하를 방지.
- setTimeout, setInterval 사용 시 메모리 누수 방지를 위해 단일 타이머를 유지하거나 타이머를 clear하는 조치 필요.
상태 관리 라이브러리 최적화
- Zustand를 사용할 때 불필요한 데이터 로드를 줄이기 위해 필요한 데이터만 직접 가져오도록 개선.
- React 훅 대신 바닐라 유틸 함수를 사용하여 불필요한 훅 호출을 줄이고, i18next의 useTranslation 훅 대신 t를 직접 import하여 사용.