[react & typescript] typescript로 forwardRef 사용하기(feat.'Component definition is missing display name' 에러)

typescript를 통해 forwardRef 사용시 eslint에서 다음과 같은 에러가 발생했다.

error Component definition is missing display name react/display-name

 

스택오버플로우를 참고하여 에러 해결! 형태도 꼭 기억해두자!

const Input = React.forwardRef<HTMLInputElement, IProps>(
  ({ label, input }, ref) => {
    return (
      <StyledInputWrapper>
        <label htmlFor={input.id}>{label}</label>
        <input ref={ref} {...input} />
      </StyledInputWrapper>
    );
  }
);

 

참고 사이트)

https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref