[React] ref 컴포넌트 props로 내려줄 때 오류 해결

상황

ref 를 사용하여 if에서 오류시 textarea에 포커싱을 주도록 설정하였으나 오류가 발생하였다.

import React, { useRef } from 'react'; //1.선언

const contentInput = useRef(); //2.useRef();
...

     if (!values.content) {
      contentInput.current.focus(); //3. ref 사용
    }
...

<TextArea
      title='내용'
      type='text'
      ...
      ref={contentInput} //4. ref 설정
    />

 

오류문구

Warning: TextArea: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop....

 

원인

 ref는 prop으로 전달하지 못하기 때문에, forwardRef을 사용하여 함수형컴포넌트 두번째 인자로 ref prop으로 전달이 가능한 것이다.

 

해결

컴포넌트 ] props를 받아서 하는 파일에 forwardRef()로 감싸주어야 ref가 적용이 된다.

const 로 작성시)

import React, { forwardRef } from 'react';

const TextArea = forwardRef(
  ({ title, .. }, ref) => {
    return (
      <label>
        <p>{title}</p>
        <textarea
         ...
          ref={ref}
        />
      </label>
    );
  }
);

export default TextArea;

 

function 으로 작성시)

import React, { forwardRef } from 'react';

export default forwardRef(function TextArea(
  { title, type... },
  ref
) {
  return (
    <label>
      <p>{title}</p>
      <textarea
        type={type}
       ...
        ref={ref}
      />
    </label>
  );
});