🤸‍♂️비제어 컴포넌트로 렌더링 최적화 하기

문제 상황

시간 업데이트와 같은 빈번히 발생하는 상태 변화로 인해, 컴포넌트가 불필요하게 재렌더링되는 문제가 발생했습니다.

따라서 비제어 컴포넌트 방식을 도입해 DOM 상태를 React 상태로 관리하지 않고 useRef를 통해 직접 DOM을 제어했습니다.

왼쪽: 개선 전, 오른쪽: 개선 후

또한 React의 memo를 사용하여, 상태 변화와 관련이 없는 컴포넌트의 재렌더링을 방지했습니다.

왼쪽: 개선 전, 오른쪽: 개선 후

최종 개선 결과

렌더링 최적화	도입 전	도입 후	차이점 🔍
Performance			-
Scripting ⌨️	6,467ms	1,020ms	🔽 85% 감소 (연산 최적화)
Heap 메모리 🧠	51.9MB	23.2MB	🔽 55% 감소 (메모리 최적화)

향후 계획

계속해서 쌓이는 채팅으로 인한 DOM 부하를 해결하고자 가상 스크롤에 대한 학습과 구현을 진행하고자 합니다.

가상 스크롤로 DOM 부하 핸들링하기