[TIL] forwardRef

최종 프로젝트를 진행하면서 팀원이 구현하던 코드를 보던 중에 forwardRef라는 함수를 사용했다. 이 함수가 어떤 행위를 하는지 몰라서 찾아봤다.

리액트 공식문서에서는 forwardRef는 특정 컴포넌트의 부모 컴포넌트에게 ref와 함께 DOM node를 노출시킨다고 한다.

다음은 예제 코드이다.

// Form file
function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

// MyInput file
import { forwardRef } from 'react';

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

예제 코드를 보아하니 원래 부모 컴포넌트에서 ref를 내려주기 위해서는 기본적으로 inputRef와 같은 방식으로 따로 props를 받아서 사용했던 것 같은데 바로 ref에 값으로 넣어서 조작할 수 있는 것을 의미하는 것 같다.

// 원래라면 이런식으로..
function MyInput({inputRef}) {
  return <input ref={inputRef}/>
}

크게 어려운 개념은 아닌 것 같고, 조금더 명확하게 ref라는 것을 명확하게 표시하기 위한 장치로 보인다.