[React] 오류 - Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

 

이 오류는 부모 컴포넌트에서 자식 컴포넌트로 useRef를 사용하여 ref를 전달하는 경우,

함수형 컴포넌트에 직접 ref를 전달하려고 할 때 발생한다고 한다.

React의 ref 시스템은 DOM 요소나 클래스 컴포넌트에는 직접 적용할 수 있지만, 함수형 컴포넌트에는 그렇지 않기 때문이다.

 

함수형 컴포넌트는 인스턴스를 생성하지 않으므로, 일반적인 방식으로는 ref를 할당할 대상이 없다.

그리고 함수형 컴포넌트는 매 렌더링마다 다시 실행되므로, 일반적인 ref로는 컴포넌트의 내부 상태나 메서드에 안정적으로 접근할 수 없기 때문이라고 한다.

 

해결 방법은 컴포넌트를 forwardRef로 감싸주면 된다.

const ChildComponent = forwardRef<HTMLDivElement, ChildProps>(
  ({ props }: ChildProps, ref) => {
  
  	return (
    	<>
        	컴포넌트..
        </>
    )
  }

 

컴포넌트를 forwardRef로 감싸고, 컴포넌트의 두 번째 파라미터로 ref를 받아주었다. 그리고 TypeScript를 사용중이기 때문에, 타입스크립트를 위해 제네릭 타입을 지정했다.

 

그런데 여기까지만 하면 Component is not a function이라는 오류가 발생하는 경우가 있다.

그 이유는 forwardRef로 감싼 컴포넌트는 디버깅과 개발 도구에서의 식별을 위해 명시적인 이름이 필요하기 때문에,

displayName을 직접 설정해줘야 한다.

 

ChildComponent.displayName = 'ChildComponent'; 

이런 식으로 displayName을 직접 설정해주면 문제가 해결된다.