useRef current 객체의 생성 시점에 따른 ref 접근방식

 

react Js로 작성한 인스타그램 클론코딩을 typescript로 migrate 하는 작업을 하던 중 생각지도 못한 자주 발생한 에러들이 있었다.

바로 useRef를 사용해 컴포넌트에 직접 접근하려고 할 때 발생한 이 오류이다.

 

처음에는 초기값을 지정해 주지 않아 발생한 오류라고 생각해 수정했었으나..

단순히 useRef 초기값을 null로 지정해주면 해결될 문제인줄 알았더니 그것 또한 아니었다

미리 스포하자면 inputRef.current가 존재하면 inputRef.current.focue()를 실행하라고 조건을 주면 해결되긴 했지만

근본적으로 왜 이런 문제가 발생되는지 알기위해서  먼저 useRef()에 대해 알아보아야 한다

 

useRef란

useRef는 프로퍼티에 변경 가능한 값을 담고 있는 '상자'로써 current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다 - React 공식 홈페이지

즉, useRef는 생성되면 current 객체를 만드는데, 이 객체는 다른 렌더링이 발생하더라도 바뀌지 않고 고유한 객체를 유지한다는 것이다

우리가 직면했던 문제의 해결 포인트는 current 객체의 생성 시점에 있다

useRef 생성 직후와 렌더링이 끝난 후 각각 ref을 콘솔에 띄워 보자

이를 통해 current 객체의 생성 시점은 렌더링 이후라는 것을 알 수 있다. 즉, 렌더링이 다 이루어지기 전에 ref.current에 접근하려고 시도하면 null 값을 얻을 수도 있기 때문에 발생했던 오류인 것이다.

따라서, inputRef.current가 null혹은 undefined가 아닐 시 inputRef.current.focus()를 실행하게 하면 문제를 해결할 수 있다.