useRef는 어떻게 데이터를 변화시키지 않을 수 있을까?

 

intro

 

안녕하세요. 오늘은 useRef를 사용하는 중, 왜 useRef는 리렌더링을 피할수 있는지에 대한 의문이 들어 포스팅을 하게 되었습니다.

 

---

 

1. useRef가 리렌더링을 피하는 이유?

 

 

useRef가 값을 변화시켜도 UI를 변화시키지 않는 이유는 리액트의 렌더링 사이클에 개입하지 않기 때문이라고 합니다.

자주쓰이는 useState와 비교를 하자면,

 - useState: 값이 변하면 리액트에게 "데이터 변했으니까 화면 다시 그려!"라고 트리거(알람)을 보냅니다.

 - useRef: 값이 변해도 리액트에게 아무런 소식을 전하지 않습니다. 그냥 메모리 어딘가에 저장된 자바스크립트 객체의 속성만 바꿀 뿐입니다.

 

 

객체의 속성을 그냥 바꾸기만 한다고? 그게 무슨소리일까요?

 

코드를 통해 예시를 들어보겠습니다. 아래는 useRef의 내부 구조입니다.

function useRef(initialValue) {
  return { current: initialValue };
}

 

---

 

위 코드에서 중요한 점은 ref.current = 10과 같이 값을 변경할 때, 이는 객체의 속성을 수정할 뿐 이라는 것입니다. 리액트는 State가 변경될 때처럼 "상태 추적"을 하지 않기 때문에, 값이 바뀌었는지조차 알지 못하고 결과적으로 렌더링을 하지 않습니다.

 

---

2. 그러면 useRef가 왜 필요하고 이러한 기능을 쓰는 이유가 무엇일까요?

 

저는 3가지로 질문에 대한 답을 정리했습니다.

 

• UI와 상관없는 변수 관리: 이전 상태 값 저장, setTimeout, 스크롤 위치 등 화면에 직접 보여줄 필요가 없지만 유지해야하는것
• DOM요소 직접 접근: 애니메이션을 위해 DOM을 직접 만져야 하거나, 특정 인풋창에 포커스를 줄때도 사용합니다
• 성능 최적화: 0.1초마다 변하는 값을 state로 관리하면 화면이 계속 깜빡거리며 성능이 저하되지만, useRef를 쓰면 내부적으로 값만 조용히 업데이트 하기 때문에 최적화를 했다고 볼수 있겠죠?

 

---

 

결론적으로  useRef는 렌더링과 독립적인 저장공간을 필요로 할때 사용하는 것! 이라고 정리했습니다.