useRef가 필요한 상황과 사용 예시

useRef는 React Hook 중 하나로, DOM 요소나 React 컴포넌트 내에서 사용되는 변수를 생성하고, 이를 관리하는 기능을 제공합니다. useRef를 사용하는 상황은 다음과 같습니다.

 

1. DOM 요소에 대한 접근: useRef를 사용하여 DOM 요소에 대한 참조를 생성하고, 이를 통해 해당 요소에 접근할 수 있습니다. 예를 들어, 특정 버튼을 클릭했을 때 input 요소에 focus를 주고 싶을 때 useRef를 사용하여 input 요소에 대한 참조를 생성하고, 해당 참조를 통해 input 요소에 focus를 주는 것이 가능합니다.

 

2. 이전 값 저장: useRef를 사용하여 이전 값들을 저장할 수 있습니다. 예를 들어, useEffect 훅에서 이전 값을 저장하고, 새로운 값과 비교하여 변경 사항이 있는지 확인하는 경우에 useRef를 사용할 수 있습니다.

 

3. 값의 변경이 필요 없는 경우: useState 훅은 값이 변경될 때마다 컴포넌트를 다시 렌더링하는 반면, useRef는 값이 변경되어도 컴포넌트를 다시 렌더링하지 않습니다. 따라서, 값의 변경이 필요 없는 상황에서는 useRef를 사용하여 성능을 개선할 수 있습니다.

 

4. 외부 라이브러리와 상호작용: 외부 라이브러리에서 제공하는 DOM 요소나 객체를 관리해야 할 때 useRef를 사용할 수 있습니다. 예를 들어, D3.js와 같은 데이터 시각화 라이브러리에서 생성한 요소에 접근할 때 useRef를 사용하여 참조를 생성하고, 해당 요소에 대한 조작을 할 수 있습니다.

5. setTimeout, setInterval 함수 관리: setTimeout, setInterval 함수는 컴포넌트가 unmount 되면 clear 함수를 사용하여 이전에 생성된 타이머 함수를 정리해야 합니다. useRef를 사용하면 컴포넌트의 life-cycle과 독립적으로 변수를 선언할 수 있어 setTimeout, setInterval 함수를 관리하는 데 유용합니다.

 

위와 같은 상황에서 useRef를 사용하여 컴포넌트를 효율적으로 관리할 수 있습니다.