React ref, forwardRef, useImperativeHandler 이해하기

React로 개발하다보면 DOM 객체에 접근해야할 때 ref를 사용한다.

클래스형 컴포넌트에서 React.createRef()를 사용해서 접근했다면, 함수형 컴포넌트에서는 useRef() 훅을 통해 ref 설정을 할 수 있다.

ref 설정

함수형 컴포넌트 기준, ref는 useRef()를 사용하여 선언하고 초기화한다.

useRef()통해 생성하면 내부에 current라는 변수를 가지고 있는 객체로 생성이 되며, ref에 할당되는 값은 current 변수에 저장이되므로 항상 참조할 때 current 값의 존재 여부를 확인하고 사용해야한다.

const ref = useRef(0);
// { 
//   current: 0
// }

여기서 중요한 점은 useRef()는 객체를 반환한다는 점이다.

자바스크립트에서 전역변수와 참조타입의 변수는 heap영역에 저장되고, 사용되지 않는 변수는 가비지 컬렉터를 이용해 삭제된다.

즉, 매번 렌더링할 때 동일한 객체(동일한 참조값)을 제공하여 값이 변경된다하더라도 같은 메모리 주소를 갖고 있기 때문에 자바스크립트의 동등 비교 연산이 항상 true를 반환한다.

따라서 변경 사항을 감지할 수 없고, 리렌더링이 되지 않는다.

ref로 값 참조

화면이 렌더링되기 위해서는 두 단계로 나뉘어진다.

render phase : 렌더링 하는 동안 React는 컴포넌트를 호출하여 화면에 변경된 내용을 파악한다.
commit phase : 커밋하는 동안 React는 DOM에 변경 사항을 적용한다.

render phase에서는 DOM 노드가 아직 생성되지 않았으므로 ref.current의 값은 null이 된다.

commit phase에서는 ref.current를 설정한다. 즉, React는 DOM이 업데이트 되기 전에는 ref.current = null로 설정했다가, DOM이 업데이트된 직후 ref.current 값을 DOM노드로 설정한다.

따라서 일반적으로는 이벤트 핸들러에서 ref를 사용하며, ref로 특정 작업을 수행할 이벤트가 없다면 useEffect 내부에서 사용할 수 있다.

forwardRef

함수 컴포넌트에서 커스텀 컴포넌트에 ref를 props로 전달하려고 하면 기본적으로 null이 반환된다. 자식 컴포넌트 DOM에 접근 할 수 없다.

import { useRef } from 'react';
 
function MyInput(props) {
  return <input {...props} />;
}
 
export default function MyForm() {
  const inputRef = useRef(null);
 
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

이유는 React에서 기본적으로 컴포넌트가 다른 컴포넌트의 DOM에 접근하는 것을 허용하지 않기 때문이다. 심지어 자신의 자식 컴포넌트도 포함이다.

자식 컴포넌트에 접근하기 위해 forwardRef를 사용하면 외부에서 전달 받은 ref를 컴포넌트 내부에 전달할 수 있다.

사용법은 다음과 같다.

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});
 
...

useImperativeHandler

이전 기업 프로젝트로 돌림판 돌리기를 구현할 때 사용한 경험이 있다.

부모 컴포넌트에서 돌림판 돌리기 버튼을 클릭했을 때 자식 컴포넌트인 돌림판을 돌아가는 함수를 동작시켜야하는 상황이었다.

useImperativeHandler()은 리액트 훅 중 하나로, 부모 컴포넌트에게 노출할 ref 핸들러를 사용자가 직접 정의(ref로 노출 시키는 노드의 일부 메서드만 노출)할 수 있게 해주는 훅이다.

따라서 자식 컴포넌트에 정의한 핸들러를 부모 컴포넌트에 노출시켜 사용할 수 있다.

import {
  forwardRef, 
  useRef, 
  useImperativeHandle
} from 'react';
 
const Roulette = React.forwardRef((props, ref) => {
  const { items } = props;
	const refs = useRef();
 
  ...
 
  // 핸들러를 부모 컴포넌트에 노출시킵니다.
  useImperativeHandle(ref, () => ({
    handleRotateRoulette,
  }));
 
  const handleRotateRoulette = () => {
		rotation.value = withTiming(rotationAngle, {
      duration: 5000,
      easing: Easing.inOut(Easing.circle),
    });
  };
 
  ...
 
 
// components/Roulette/form  부모 컴포넌트
const RouletteForm = ({ navigation, route }) => {
  const rouletteRef = useRef();
 
	...
 
  const handleSubmitVote = () => {
    if (isVote) setVoteText('원판 돌리기');
    else {
      rouletteRef.current.handleRotateRoulette();
    }
  };
 
  ...
 
  return (
    ...
    <Roulette
      ref={rouletteRef}
      ...
    />
    ...
  );
};

참고

스터디 개요