참조 동일성 (useRef / useState)

프로젝트가 끝나고 나의 코드를 본 많은 동기생들이 물어본 것이 useRef였다. 내가 왜 useRef를 사용했는지에 대한 질문들이었다. 나는 그저 공식문서에 있는 답변을 해주었다. 내가 사용한 이유는 매번 렌더링을 할 때에 동일한 객체를 제공해주기 위해서라고.

반복되는 질문을 받다보니 글로 정리해서 준다면 어떨까라는 생각이 되어서 정리해보기로 했다.

위에는 reactjs.org에 설명된 useRef의 기본설명이다. useRef는 통상적으로 DOM에 접근하는 방법으로 사용한다. input이라던가 아니면 어떤 요소에 focus를 할당한다던가 아니면 scroll 이벤트를 할때에 사용한다.(이건 공식문서에 보면 이런 상황에서 사용하라고 아주 잘 설명되어 있다.)

 

근데 이러한 부분이 아니라 함수형 컴포넌트에서 렌더링이란 것을 공부하면서 렌더링이란 것이 함수를 호출하는 과정이고 이 과정에서 참조값들이 계속해서 생성되는 문제에 대해서 고민하게 되었고 이 때에 참조 동일성 문제에 대해서 알게 되었다. 사이드 이펙트에서 만들어서 넣어주는 것은 방법이 있을 수 있지만 이 방법은 마이크로 앱에서는 개선되지 않는 방법이기 때문에 참조동일성을 유지할 수 없다.

 

일반적으로 우리가 알고있는 메모이제이션 방식인 useMemo와 React.memo를 사용해서 해당 값을 고정시키는 방법도 있을테지만 개인적으로 useMemo를 사용함으로 인한 리소스 낭비로 인해 useMemo를 사용하는 경우는 안에 있는 값들이 고정된 값일 경우로 한정하고 있어서 이것 또한 나는 pass였다.

 

그래서 내가 선택한 방법은 useRef였다. 이 useRef의 current값이 변경되더라도 리액트는 리렌더링을 발생시키지 않고 리렌더링이 되지 않음으로써 나는 이 값이 동일한 값으로 유지되도록 해주려던 내 목적을 이룰 수 있었다.

 

이렇게 작업을 하고 매니저님을 통해 안 사실은 useState에서 setter를 제외하고 값을 할당하면 이 userRef를 할당하고 current에 값을 주어주는 방식과 동일한 결과를 가져온다는 것이었다.