forwardRef

예전에 한번 봤었는데, 회사 코드분석을 하다가 자주 보이길래 다시한번 정리해두려고 한다.

 

ref전달은 컴포넌트를 통해, 자식 중 하나에 ref를 자동으로 전달하는 기법이다.

함수컴포넌트는 인스턴스가 없기때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없다.

그렇다면 ref를 통해 함수 컴포넌트를 직접 제어하는건 완전히 불가능할까?

 

React.forwardRef 이때 이걸 활용 할 수가 있다.

forwardRef를 활용하면 부모 컴포넌트로부터 하위 컴포넌트로 ref를 전달할 수 있다. 

(전달받은 ref는 HTML요소의 속성으로 전달)