TIL87.forwardRef

ref를 prop으로 전달하는 방법에 대해 알아보자.

ref

forwardRef 알아보기 이전에 ref개념에 대해 간단하게 짚고 넘어가자.
react를 사용할 때 DOM에 접근해야 하는 상황이 종종 발생한다. js에서 특정 DOM에 접근하기 위해서 getElementById와 같은 DOM Selector를 사용하는 것처럼 react에서는 ref를 사용한다.

//부모 컴포넌트
import React, { useRef } from "react";
import Input from "./components/Input";

const App = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  }

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

//자식 컴포넌트
const Input = ({ ref }) => {
  return <input type="text" ref={ref} />;
}

위의 예시와 같이 부모컴포넌트에서 inputRef객체를 자식인 Input컴포넌트에 ref prop으로 넘긴다.
자식 Input컴포넌트는 ref로 넘어온 inputRef 객체를 다시 내부에 있는 < input >엘레먼트의 ref prop으로 넘겨주게 된다.
하지만 실행시켜보면 ref는 prop이 아니다 라는 오류가 뜬다.
리액트에서는 key,ref처럼 특수목적으로 사용되어 일반적인 용도로 사용할 수 없는 prop이 있기 때문이다.
이때 React컴포넌트에서 ref를 prop으로 사용하려면 react에서 저공하는 forwardRef()라는 함수를 사용하면 된다.

forwardRef

forwardRef를 사용하면 부모 컴포넌트로부터 하위 컴포넌트로 ref를 전달할 수 있게 된다. 이렇게 전달받은 ref를 HTML요소의 속성으로 넘겨줌으로써 함수 컴포넌트 역시 ref를 통한 제어가 가능해진다.

//부모 컴포넌트 코드 동일

//자식 컴포넌트
import React, { forwardRef } from "react";

 //인자로 props이외에 별도로 ref를 두번째 매개변수로 받는다.
const Input = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

*주의점

forwardRef는 최하단 컴포넌트에 사용하는 것이 일반적이다. 상위 컴포넌트에 사용했을 경우, 상위 컴포넌트에 딸린 하위 컴포넌트가 많기때문에 그만큼 영향을 많이 끼칠 수 있기 때문이다. 컴포넌트 간의 결합도를 증가시켜 어플리케이션의 유지보수를 어렵게 만듦...