forwardRef 관련 Component definition is missing display name(react/display-name) 에러

forwardRef 관련 Component definition is missing display name(react/display-name) 에러 

 

React.forwardRef<HTMLInputElement>((props, ref) ... ) 

 

forwardRef 역활 

React.forwardRef 는 렌더링에 사용될 함수를 인자로 받는데 

React는 이 함수를 두 개 인자 props와 ref를 사용하여 호출하고, 이 함수는 React 노드를 반환.

하는 게 주요 맹점이다.

 

React 를 사용하다보면 ref 를 자식 컴포넌트에 넘겨서, 그 내부 HTML 엘리먼트에 접근할 수 있게 해줘야하는 경우가 발생. 

 

이때 사용하게 되는 것이 React.forwardRef 

 

타입스크립트를 사용하지 않는 경우 위 방법은 정상적으로 동작. 

하지만, 타입스크립트를 사용하게 되면 위 코드는 Component definition is missing display name 에러가 발생한다.

 

typescript 환경에서 forwardRef() 함수를 호출시 인자값으로 익명 함수로 전달하게 되면

컴포넌트의 이름이 생성되지 않게 된다고 한다.

 

리엑트 개발시 브라우저 개발자도구를 보면 아래 그림처럼 <div class="App-link css-qiobeq-BuildBtnComp">

라고 되어 있는 부분에 BuildBtnComp 라는 이름이 바로 컴포넌트의 이름이다.

바로 저 부분이 생성 안 된다는 것을 추측해 볼 수 있다. 

암튼 이 때문에 발생하는 에러이기에 그냥 간단히 익명 함수가 아닌 기명 함수로 인자를 전달하면 된다. 

 

익명함수 : () =>{...}  / ( function(){...} )() 

기명 함수 : function  test(){ ... }

 

암튼 결론은 아래와 같이 해결 했다.

//또는 function BuildBtnComp(){ ... }
const BuildBtnComp=()=>{....}

const Button: ButtonType = forwardRef( BuildBtnComp );

 

 

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

Component definition is missing display name for forwardRef