2023-02-01 React_forwardRef

별코딩 참고

forwardRef 기능

부모 컴퍼넌트에서 자녀컴퍼넌트로 Ref를 전달할 때 쓰는 기능

부모컴포넌트가 자녀 컴포넌트에 dom요소 접근을 해야 할 때

이 것을 ! 고쳐 봅시다

 

 

input 태그가 아닌 컴포넌트라면?

같은 기능을 어찌 해야 할까요?

부모 컴퍼넌트에서 만든 ref를

자녀 컴포넌트에 전달!

 

그때 사용할 것이 forwardRef!

props를 전달하듯! 키와 값으로 전달한다.

 

사용법

리엑트에서 제공하는 forwardRef 함수로(컴포넌츠)를 감싼다. 

감싸진 자녀 컴포넌트는 새로운 두번째 인자를 받는데,

두번째 인자 ref

부모에게서 전달받은 ref가 들어있다.

전달받은 ref를 ref={ref} 속성을 넣어준다.