react-hook-form을 사용해서 컴포넌트를 작성하던 중 동일한 문법을 사용해도 내가 작성한 컴포넌트에서만 문제가 발생하고 있었다.
•
antd 처럼 외부 라이브러리 사용
import { Input } from 'antd';
<Controller
render={({ field }) => <Input {...field} >}
/>
TypeScript
복사
•
내가 작성한 컴포넌트의 경우
<Controller
render={({ field }) => <MyComponent {...field} >}
/>
TypeScript
복사
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Controller`.
TypeScript
복사
에러 문구를 살펴보니 해당 컴포넌트는 함수형 컴포넌트로 작성되어 있었다.
export const MyComponent: React.FC<Props> = ({ prefix, ...rest }) => {
TypeScript
복사
공식 문서에 살펴보니 함수형으로 작성 된 자식 컴포넌트에서 ref 가 필요한 경우 React.forwardRef 로 감싼 후에 사용할 수 있다고 나와 있었다.
key와 동일하게 ref 또한 일반적인 prop으로 사용할 수 없는 것이다. 일단 해당 컴포넌트에서 ref를 사용할 일은 없어, 객체 구조분해할당 대신에 필요한 prop만 따로 전달하는 것으로 수정하였다.
<Controller
render={({ field }) => (
<MyComponent
onChange={(newValue) => field.onChange(newValue)}
value={field.value}
/>)}
/>
TypeScript
복사
props를 구조 분해 할당으로 전달할 때 간편했는데 혹시 해당 컴포넌트에 React.forwardRef 를 사용하는 것이 나을까?
라는 의문이 들어 forwardRef에 대해서 좀 더 찾아보다 좋은 아티클을 발견하였다.
<Input />와 같은 최말단 컴포넌트를 제외하고는 컴포넌트의 결합도를 증가시키기 때문에 권장하는 방식이 아니라는 것이다. 또한, 단순히 props 전달의 편의를 위해 컴포넌트를 React.forwardRef 를 사용해서 작성하게 되면 다른 사람이 보기에는 컴포넌트에서 ref 값을 사용하지 않는 것이 어색해 보일 것이라는 생각이 들었다.
