피드로 돌아가기
Dev.toFrontend
원문 읽기
Re-render 최적화를 위한 Mutable Reference 기반의 상태 유지 전략
Understanding useRef in React: Concepts, Use Cases, and Examples
AI 요약
Context
React의 선언적 UI 렌더링 구조에서 State 변경에 따른 잦은 Re-render 발생으로 인한 성능 저하 문제 존재. UI 업데이트와 무관하게 유지되어야 하는 데이터의 영속성 확보와 Imperative한 DOM 제어 필요성 증대.
Technical Solution
- mutable object 형태의 .current 프로퍼티를 통한 데이터 저장 구조 채택
- 컴포넌트 Lifecycle 전체 기간 동안 동일한 Reference를 유지하는 Persistent Container 설계
- State 변경 트리거를 배제한 값 업데이트로 불필요한 Rendering Cycle 제거
- React의 추상화된 DOM 계층을 건너뛰어 직접적인 DOM Node 접근 경로 확보
- useEffect와의 조합을 통한 이전 상태값(Previous State) 스냅샷 저장 메커니즘 구현
- setInterval ID와 같은 외부 리소스 참조값의 렌더링 간 유실 방지 설계
실천 포인트
- UI 렌더링에 영향을 주지 않는 변수 설정 시 useState 대신 useRef 검토 - 포커스 제어, 애니메이션 등 Imperative API 호출 필요 시 ref attribute 활용 - 이전 렌더링 시점의 State 값과 비교 분석이 필요한 로직에 useRef 적용 - .current 프로퍼티 접근 누락 여부 및 UI 업데이트 누락 가능성 사전 체크