ref is not a prop 에러

Question

Viewer 컴포넌트 내부의 요소를 형제 컴포넌트인 Controls로 조작하고 싶어 사진처럼 상위 컴포넌트에서 ref를 정의해서 두 컴포넌트에 각각 넘겨줬는데 Viewer 컴포넌트에서 ref is not a prop이라는 오류메시지가 발생합니다. ref를 넘겨줬는데 왜 ref가 prop이 아니라고 하는지 모르겠습니다. 뭐가 문제인지 아시는 분이나 구현할 다른 방법을 아시는분 계실까요?

이은재 · Answer

안녕하세요.

ref는 HTML 엘리먼트를 사용하기 위해 사용되어서 약간 keyword 처럼 쓰이기 때문에 컴포넌트의 props로는 직접 작성할 수 없는 걸로 알고 있습니다.

컴포넌트에 ref를 전달하고 싶으시면 Control에 하신 것처럼 ref가 아닌 다른 이름으로 props를 넘겨주시거나 React에서 제공하는 forwardRef를 사용해야 합니다. 현재 ref를 전달해주고 있는 Viewer를 export하실 때 export default forwardRef(Viewer)와 같이 forwardRef로 감싸서 export 하시면 아마 ref를 정상적으로 전달할 수 있을 것 같습니다.