피드로 돌아가기
useRef Hook in react
Dev.toDev.to
Frontend

Re-render 유발 없는 Mutable State 유지를 통한 렌더링 최적화

useRef Hook in react

Deva I2026년 6월 10일2분beginner

AI 요약

Context

React의 State 변경 시 발생하는 강제적인 Component Re-render로 인한 성능 저하 가능성 존재. 일반 변수는 렌더링 시 초기화되어 데이터 지속성이 보장되지 않는 한계점 보유.

Technical Solution

  • 렌더링 사이클과 독립적인 Mutable value 저장을 위한 useRef 도입
  • .current 프로퍼티를 통한 값의 직접 수정으로 UI 업데이트 트리거 배제
  • Component Life-cycle 동안 데이터 일관성을 유지하는 Persistence 메커니즘 구현
  • DOM element에 직접 접근하여 브라우저 API를 제어하는 Interface 제공
  • State 변경 시에만 UI를 갱신하고 useRef 값은 메모리에 유지하는 선택적 렌더링 전략 채택

실천 포인트

1. UI 변경이 필요 없는 내부 상태 관리 시 useState 대신 useRef 검토

2. 외부 라이브러리 인스턴스 저장 및 DOM 직접 조작 필요 시 적용

3. .current 값 수정이 렌더링을 유발하지 않음을 인지하고 Side Effect 설계

태그

#DOM-Access#Rendering Optimization#Mutable State#React Hook#useRef
원문 읽기