[React Error] Function components cannot be given refs.

내가 만든 컴포넌트에 ref를 달고 싶었다. 

하지만 다음과 같은 에러가 . . .

 

Warning: Function components cannot be given refs. 
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

 

forwardRef요.. ?

 

useRef는 알아도 forwardRef는 뭐지?!

forwardRef에 대해 알아보자!

 

 

---

 

 

먼저 ref란 무엇인지 간략하게 말해보자.

ref는 React에서  HTML엘리먼트에 접근하기 위해 사용한다.

(마치 자바스크립트의 셀렉터처럼 . . . )

 

더 자세한 useRef를 알고싶다면 👇

https://mandelina-code.tistory.com/86

[React - Hook] useRef가 뭘까 ? 어떻게 사용하지 ? (예제)

 

 

하지만, 함수형 컴포넌트에선 class컴포넌트와 달리 인스턴스가 없기 때문에 ref를 사용할 수 없다고 한다.

HTML Element 접근이라는 특수한 용도로 사용하기 때문이다.

 

 

---

 

해결방법 

forwardRef 를 사용하면 된다.

 

 

 

[예제]

export const EmailInput = forwardRef(function EmailInput(
  { value, onChange },
  ref
) {
  return (
    <LabelStyle>
      이메일
      <InputStyle
        placeholder='이메일 주소를 입력해주세요.'
        type='email'
        name='userEmail'
        ref={ref}
        value={value}
        onChange={onChange}
      />
    </LabelStyle>
  );
});

 

forwardRef로 감싸서 사용하면 된다.

이때 props로 받는 다른 인자는 왼쪽에, ref는 오른쪽에 따로 빼주어야 한다.

 

 

 

참고자료 : https://ko.reactjs.org/docs/forwarding-refs.html

Forwarding Refs – React