forwardRef()

1. 언제 사용할까?

컴포넌트가 중첩되어 있을 때 중첩된 리액트 요소에 접근할 때 사용한다.

컴포넌트 내부에 바로 return 되는 값이 리액트 요소라면 ref 객체로 접근이 가능하다. 하지만 반환되는 것이 리액트 요소가 아닌 import로 불러온 컴포넌트라면 해당 컴포넌트에 ref 객체를 전달해서 접근하려는 리액트 요소에 ref를 전달해야한다.

2. 사용 시 주의 사항

forwardRef()는 중첩도가 높아질 수 록 작업이 복잡해진다.

아래 이미지는 props를 자식 컴포넌트에 전달하는 방식이다. forwardRef()도 이와 같이 중첩도가 높아지면 자식 → 자식의 자식 → 자식의 자식의 자식 ... 처럼 구조가 복잡해지는 현상이 나타난다. 중첩도가 높아지지 않도록 주의하자.

3. 문법

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;