React : useRef props넘겨줄 때 주의할점. forwardRef.
form에서 input의 value를 가져올 때,
useState를 사용하는 것보다 useRef를 사용하는 것을 선호한다.
useState를 쓰면 계속 렌더링 된다는 것이 신경 쓰인다.
이번에도 회원가입 form을 만들면서 ref를 썼는데 결론부터 말하자면 ref값을 props로 전달하는 과정에서 고생했다.
ref는 예약어이기 때문이다. (예약어 : 쓰임이 이미 정해져 있는 키워드)
const SignupForm = () => {
const emailRef = useRef<HTMLInputElement>(null);
return (
<InputForm id={"email"} ref={emailRef} />
)
}
const InputForm = ({id, ref}) => {
return (
<input
name={id}
type={id}
ref={ref}
/>
)
}이런 식의 구조였다.
InputForm 컴포넌트에 직접 ref를 이용해서 props를 전달하려고 한게 잘못이었다.
위에 쓰인 ref는 props로 작용한게 아니게 된 것.
이것을 해결하기 위해서는
1) 다른 이름으로 전달해 주거나 ref -> emailRef. ex) <InputForm id={"email"} emailRef={emailRef} />
2) forwardRef를 사용해야 했다.
(forwardRef 사용법 : https://reactjs.org/docs/forwarding-refs.html)
forwardRef를 통해 해결해 보았다.
아래는 완성한 코드.
const InputForm = forwardRef(
(props: Props, ref: React.Ref<HTMLInputElement | any>) => {
return (
<input
name={props.id}
type={props.id}
ref={ref}
className="border-b border-indigo-300 outline-0"
/>
);
}
);
그런데 또 문제가 생겼다.
Component definition is missing display name 에러.
forwardRef로 함수를 호출했는데,
함수를 호출할 때 익명 함수를 넘기게 되면 브라우저에서 React 개발자 도구를 사용할 때 컴포넌트의 이름이 나오지 않기 때문에 발생하는 에러 라고한다.
자바스크립트에서는 그냥 넘어가는데, 타입스크립트를 사용할 경우 나오는 에러이다.
이것을 해결하기 위해서는,
익명함수가 아닌 함수 선언식을 사용하여 함수명을 표기해주던가,
또는 InputForm.displayName="InputForm"; 과 같이, displayName 속성을 직접 지정해주면 해결 할 수 있다.
참고사이트