불필요한 Re-render 제거를 통한 React 런타임 메모리 최적화 전략

Mastering useRef in React: The Hook That Gives React Memory Without Re-Rendering

Kathirvel S2026년 5월 20일12분intermediate

AI 요약

Context

컴포넌트 재실행 시 로컬 변수가 초기화되는 React의 함수형 구조로 인한 상태 유지의 한계 발생. UI 업데이트와 무관한 내부 데이터까지 useState로 관리함에 따라 불필요한 Virtual DOM 비교 및 Rendering 비용이 증가하는 병목 지점 확인.

Technical Solution

Mutable Container 구조를 통한 렌더링 사이클과 독립적인 메모리 공간 확보
.current 프로퍼티를 활용하여 React의 상태 추적 시스템을 우회하는 데이터 저장 방식 채택
UI 반영이 필요 없는 Timer ID, Scroll Position, External Library Instance의 저장소로 useRef 지정
상태 변경 시 Scheduler에 Render 작업을 요청하지 않는 Non-reactive 업데이트 로직 구현
동일한 객체 참조를 전 렌더링 단계에서 유지하여 메모리 재할당 및 가비지 컬렉션 부하 감소

실천 포인트

- 데이터 변경이 View의 즉각적인 갱신을 요구하는가? (No $\rightarrow$ useRef) - 해당 값이 컴포넌트 재렌더링 시에도 유지되어야 하는가? (Yes $\rightarrow$ useRef) - DOM 직접 접근이나 외부 라이브러리 인스턴스 보관이 필요한가? (Yes $\rightarrow$ useRef) - useState 사용 시 불필요한 하위 컴포넌트 Re-render가 발생하는가? (Yes $\rightarrow$ useRef 검토)

태그

#Performance Optimization #Re-rendering #React #Mutable State #useRef

원문 읽기