[React] forwardRef

react 강의를 들으면서 react에서 입력을 받을 때 onChange를 사용하여 입력마다 함수를 호출하여 state 값을 변경하는 것을 배우고 그다음 Ref를 사용하여 참조를 이용하여 버튼을 클릭했을 때만 값을 저장하는 방법을 배웠는데 지금은 input 기본 태그를 사용하는 것이 아니라 input 컴포넌트를 따로 만들어서 사용하고 있는 상황인데 이런 사용자 정의 컴포넌트에서는 ref 속성이 작동하지 않는 상황입니다.

하지만 사용자 지정 컴포넌트에서 ref가 작동하도록 하는 방법이 있습니다. forwardRef()함수를 사용하는 것입니다. 사용자 정의 컴포넌트인 Input.js 파일로 이동합니다. 파일 상단에서 import { forwardRef } from 'react'; 해줍니다. 그다음 forwardRef로 컴포넌트를 감쌉니다. 이렇게 하면 두 번째 매개 변수로 상위 컴포넌트로 부터 오는 ref를 전달받을 수 있습니다. 그리고 컴포넌트 함수 내부에서 사용할 수 있습니다.

Input 컴포넌트 안에 있는 input 요소에 ref 속성에 두 번째 매개변수로 전달받은 ref를 추가합니다. 이렇게 해서 사용자 정의 컴포넌트에서도 ref를 이용하여 값을 받아올 수 있습니다.

React Document