컴포넌트의 scroll을 함수로 조작하는 등의 DOM을 조작하려고 할 때 useRef()를 사용했습니다.
그런데 부모 컴포넌트에서 자식 컴포넌트의 요소를 조작하려고 할 때 부모에서 생성한 useRef()를 자식에게 props로 넘겨주는 등의 방법은 유효하지 않습니다.
1. forwardRef()
forwardRef()를 이용하면 부모 컴포넌트에게 ref를 전달할 수 있습니다.
자식 요소에서 forwardRef를 import하여 위와 같이 export합니다.
부모 컴포넌트에서 Container 컴포넌트 내부의 요소인 ScrollComponent를 조작할 수 있게 됩니다.
2. useImperativeHandle()
부모 컴포넌트와 자식 컴포넌트 둘 다 해당 요소를 조작하려면
useImperativeHandle()를 사용하면 됩니다.
자식 컴포넌트에서 내부 요소를 조작하는 함수를 만든 후
useImperativeHandle()을 이용하여 부모에게 전달할 ref에 사용할 함수를 넣어줍니다.
부모 컴포넌트는 전달받은 ref의 current.함수명을 이용하여 자식 컴포넌트 내부의 함수를 실행할 수 있습니다.
useImperativeHandle()을 이용하면 자식 컴포넌트 내부의 함수 뿐만 아니라 특정 값도 전달할 수 있습니다.
부모가 자식에게 props로 값을 전달하듯이
자식은 부모에게 useImperativeHandle()을 이용하여 전달할 수 있습니다.
