useRef 로 관리하는 값이 바뀌었을 때 리렌더링 되지 않는 이유

 

리액트의 리렌더링 조건

먼저 리액트의 리렌더링 조건에 대해 살펴보면 리액트의 리렌더링 조건은 다음과 같다. ( 더 자세하게는 이 블로그)

 

1. setState를 이용한 state변경
2. 부모컴포넌트 리렌더링
3. props변화

이전 state와 현재 state, 혹은 이전 props와 현재 props를 얕은 비교(메모리 주소비교)하여 이전값 현재값 변화를 감지한다.

useRef

useRef는 보통 리액트에서 리렌더링과 값의 변화를 분리하고 싶을 때 사용한다.

 

나의 경험으로는

• dom 직접 변화,
• 카카오맵 안깜빡 거리게 하기

정도가 있다.

 

그렇다면 왜 useRef로 관리하는 값은 리액트의 리렌더링 알고리즘에 감지되지 않을까??

 

1. useRef는 heap영역에 저장된다.
2. heap영역에 있으면 어플리케이션 종료 or 가비지 컬렉팅 되기전까지 같은 메모리 값을 유지한다.
3. 그러다 보니 useRef로 관리하는 값이 변경되어도 동일 메모리 주소를 유지한다.
4. 얕은 비교를 하는 리액트의 리렌더링 감지에서는 '===' 연산이 항상 true를 반환한다.
5. 변경사항 감지가 되지 않아 리렌더링을 하지 않는다.