함수형 컴포넌트로 ref 보내기 | forwardRef에 대해 알아보자

 

 

 

 

과제테스트 중 forwardRef라는 것을 발견하고(시험 내용 아님!! 그냥 코드에 적혀진걸보고 궁금해서 공부함!!)
이게 뭐지..? 하면서 알아보았다

 

 

✍ forwardRef

함수 컴포넌트가 있다.
이 안에 있는 input에 포커스를 맞추기 위해서 우리는 useRef을 종종 사용한다.

하지만 일반적인 input이 아니라, Input Component라면?

이 때도 useRef을 사용해서 포커스를 줄 수 있을까?

 

정답은 불가능.

함수 컴포넌트는 ref를 받을 수 없다.
= props.ref는 사용이 불가능하다.

이유가 뭘까 ❓

=> 함수 컴포넌트는 인스턴스가 없기 때문에

=> 따라서, forwrdRef가 필요하다

 

언제?

React.forwardRef는 전달받은 ref을 하부 트리 내의 다른 컴포넌트로 전달하는 React 컴포넌트를 생성한다.
일반적으로는 잘 사용되지 않지만

• DOM element로 ref 전달
• 고차 컴포넌트(Higher Order Component)로 ref 전달
  에서는 유용하게 사용된다.

react.forwardRef는

• 렌더링에 사용될 함수를 일자로 받고
• React는 이 함수를 props와 ref을 사용하여 호출
• 함수는 React 노드를 반환한다

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

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

✨ 1
예제 1번을 보면 FancyButton이라는 함수형 컴포넌트에 ref을 전달해준다.
=> 이렇게만 하면 작동하지 않는다. 함수 컴포넌트는 인스턴스가 없어서!

✨ 2
따라서 FancyButton 컴포넌트에 React.forwardRef을 묶어주고, props와 ref을 전달해준 후
원하는 엘리먼트에 ref을 달아주면
ref.current는 button이라는 DOM 엘리먼트 인스턴스를 직접 가리킨다.

 

 

 

 

 

 

 

💛
React 공식문서