React Native에서 ref의 null 문제

Problem

React-Native를 이용해서 웹뷰가 포함된 앱을 개발하는 과정에서 WebView 컴포넌트의 새로고침 및 네비게이션 등을 처리하기 위해서 ref가 필요한 경우가 있었다. 그런데 이때 앱을 처음 실행 했을 때는 문제가 없었지만 앱을 사용하다보면 갑자기 ref가 null이 되는 문제가 발생했다. 내 경우는 아래와 같이 구현했고 함수형 컴포넌트를 이용했었다.

const webview = React.createRef();
...
<WebView
ref={webview}

Solution

클래스 컴포넌트에서는 createRef를 사용해도 되지만 함수형 컴포넌트에서는 useRef¹를 사용해야 했다. 그래야 state가 변경되었을 경우 다시 랜더링 되는 과정에서 ref가 초기화되지 않았다.

const webview = useRef();
...
<WebView
ref={webview}

useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. 만약 React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용하세요.¹

위 문서에서도 확인할 수 있듯이 클래스 컴포넌트에서는 createRef² 또는 useRef 모두 사용이 가능하지만 함수형 컴포넌트에서는 useRef만 사용이 가능했다. useRef는 ref의 초기값을 할당하고 state가 변경되어 리렌더링 되어도 초기화 되지 않는다.

References