[React] ref는 state와 달리 리렌더링 이후에도 어떻게 값을 유지할까?

A ref is a plain JavaScript object with a single property called current, which you can read or set.
- React 공식 문서

 

 

useRef는 React 컴포넌트의 렉시컬 환경에 대한 참조를 유지합니다.

useRef 훅은 컴포넌트 내에서 변수를 만들고 유지합니다.

리렌더링 되어도 이 값은 유지됩니다.
(또한 state와 달리 값이 변경되더라도 리렌더링을 촉발하지 않습니다.)

useRef로 생성된 ref 객체 내에는 current property가 존재하고 current property에 값이 유지됩니다.

useRef 훅은 클로저(closure)를 활용하여 현재 property를 유지하고 렌더링 되더라도 값을 보존합니다.

useRef가 클로저를 활용하기 때문에 useRef로 생성한 객체는 컴포넌트가 렌더링될 때마다 새로 생성되는 것이 아니라 이전 객체가 계속 사용됩니다.

클로저는 함수가 속한 렉시컬 스코프를 기억하며 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능을 뜻한다.
- Kyle Simpson

 

---

클로저란?

클로저 개념에 익숙하지 않은 분을 위해 “모던 자바스크립트 Deep Dive (이웅모 저)”의 클로저에 관한 설명 중 일부를 가져왔습니다.

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.

실행 컨텍스트의 관점에 설명하면, 내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.

즉 외부함수가 이미 반환되었어도 외부함수 내의 변수는 이를 필요로 하는 내부함수가 하나 이상 존재하는 경우 계속 유지된다. 이때 내부함수가 외부함수에 있는 변수의 복사본이 아니라 실제 변수에 접근한다는 것에 주의하여야 한다.

https://poiemaweb.com/js-closure

클로저에 대해서는 다음에 따로 다루도록 하겠습니다.

---

 

React에서 컴포넌트(함수)는 렉시컬 스코프에 의해 실행되며, useRef로 생성한 ref객체는 해당 함수 컴포넌트의 렉시컬 환경에 대한 참조를 유지합니다. 그렇기 때문에 useRef로 생성한 ref 객체는 함수 컴포넌트 내부에서 생성된 클로저에 의해 계속 접근될 수 있습니다.

React의 useRef는 이러한 클로저 메커니즘을 활용하여 컴포넌트가 리렌더링되어도 참조를 유지합니다.
이것은 useRef 객체가 렌더링 사이에 동일한 객체로 유지된다는 뜻입니다.

또한, useRef로 생성된 ref 객체의 current 값이 변경되더라도 React는 이를 감지하지 않습니다. 이는 useState에러 리턴된 state와 달리, React가 ref 객체의 변경을 감지하지 않기 때문이고 useRef 객체는 React가 관리하는 상태(state)가 아니기 때문입니다.

React에서 다음과 같은 규칙에 해당되는 경우만 
컴포넌트 리렌더링이 일어난다.
1. state changes
2. parent re-render
3. context changes
4. hook changes

useRef에 의해 반환된 ref객체는 말 그대로 순수 자바스크립트 객체이고 이 객체의 레퍼런스 주소가 메모리에 저장되어 있습니다.

(JavaScript에서 객체는 참조에 의해 전달됩니다. 즉, 객체를 변수에 할당하면 변수에는 객체의 주소가 저장되고, 실제 객체는 메모리의 특정 위치에 저장됩니다. )

Reference

• https://adevnadia.medium.com/react-re-renders-guide-why-react-components-re-render-a4efab132c10
• https://www.joshwcomeau.com/react/why-react-re-renders/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• https://dev.to/dylanju/useref-3j37
• https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/