[TIL][react] forwardRef vs innerRef

Wendy·2021년 3월 21일
0

학습기록

목록 보기
9/20
post-custom-banner

갑자기 의문이 들었다
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라고 명시하지 않아도 된다

이해는 되는데
공식문서에 사용안내만 있고, 도입 배경이 없어서 (찾지 못한건지?)
공식 의견이 궁금하다

profile
개발 공부중!
post-custom-banner

0개의 댓글