갑자기 의문이 들었다
forwardRef를 꼭 써야할까?
그냥 props에 ref를 넣을순 없지만 (key처럼 ref도 props에 전달되지 않음)
다른이름으로 (innerRef 같은...) 전달할 수 있지 않을까?
그래서 한번 테스트를 해보았다
//WritingComponent.jsx
<CustomInput
ref={register({ validate: (value) => !!value.trim() })} />
//CustomInput.jsx
const CustomInput = forwardRef((props,ref)=>{
...
<Input ... ref={ref} ... />
...
});
이렇게 짰던 코드를
//WritingComponent.jsx
<CustomInput
innerRef={register({ validate: (value) => !!value.trim() })} />
//CustomInput.jsx
const CustomInput = (props) => {
...
<Input ... ref={innerRef} ... />
...
};
이런식으로 해도 문제가 없다!
아니 그럼 왜만든거야????
해서 찾아보니 아래의 이유 때문인 것 같다.
1) prop에 각자 다른 이름을 붙이는 대신 ref로 통일해 직관적으로 쓸수있다
2) 3rd-party에서 개발할때 따로 안내서에 xxRef라고 명시하지 않아도 된다
이해는 되는데
공식문서에 사용안내만 있고, 도입 배경이 없어서 (찾지 못한건지?)
공식 의견이 궁금하다