리액트 훅 useRef

useRef란 ?

useRef는 React Hook 중 하나로 컴포넌트의 DOM 요소나 변수에 대한 참조를 저장할 수 있는 방법입니다.

useState와는 다르게 렌더링을 발생시키지 않고도 값을 유지할 수 있습니다.

 

useRef의 주요 용도

DOM 요소에 접근

• 주로 HTML 요소에 접근하여 포커스를 주거나 스크롤을 제어하거나 입력 필드의 값에 접근하는 등의 작업을 할 때 사용됩니다.

렌더링 간 값 유지

• state를 업데이트할 때는 컴포넌트가 재 렌더링 되지만 useref는 렌더링을 발생시키지 않고 값을 유지함

 

useRef 사용 예시 (DOM 요소에 접근)

입력 필드에 포커스주기

 

해당 버튼을 누르면 ref.current.focus()가 호출되어 입력 필드에 포커스 자동 설정

 

 

useRef로 렌더링 없이 값 관리하기

 

ref.current++ 은 값이 증가해도 렌더링이 발생하지 않고 값이 계속 유지됩니다.

그리고 count는 useState로 관리되기 때문에 값이 변경될 때마다 컴포넌트가 재 렌더링 됩니다.

 

useRef의 특징 정리

• 렌더링 사이에서 값 유지 : useRef로 참조된 값은 컴포넌트가 재렌더링될 때도 값이 초기화 되지않고 유지됩니다.
• 렌더링을 발생시키지 않음 : useState와 달리 useRef 값이 변경되더라도 컴포넌트가 다시 렌더링되지 않습니다.
• DOM 요소에 접근하기 : HTML 요소에 직접적으로 접근해 포커스 , 스크롤 조작 등을 쉽게 할 수 있습니다.

 

useRef는 언제 사용하는지?

1. DOM 요소에 직접 접근해야 할 때

• 입력 필드에 자동으로 포커스를 주거나 특정 DOM 요소의 스크롤 위치를 조작해야 할 때 useRef 를 사용

2. 렌더링 간 값 유지가 필요할 때

• 렌더링을 발생시키지 않고 변수처럼 값을 저장하고 싶을 때 useRef를 사용하면 효과적입니다.

3. 상태 업데이트로 인한 불필요한 렌더링을 피하고 싶을 때

• 상태를 업데이트 하지 않고도 값을 유지해야 하는 상황에서 useRef를 사용하여 성능을 최적화할 수 있습니다.