[Simple memo] React forwardRef란?

수수·2022년 10월 8일
0

React

목록 보기
2/2

forwardRef란?

  • 영어 그대로 해석하면 다음과 같다. forward ref: ref를 전달하다
  • 간단하게 말하면 상위 컴포넌트에서 자식 컴포넌트로 ref를 전달할 때 사용해야 하는 것이 바로 forwardRef 이다.
  • 자식 컴포넌트로 전달한다는 것은 아래와 같은 것을 말한다. 그러나 아래는 잘못된 예시이다.
import React, { useRef } from 'react'

function Input({ ref }) {
	return <input ref={ref} />
}

function ParentComponent() {
	const inputRef = useRef(null);
    
    return (
    <>
    	<Input ref={inputRef} />
        ...(생락)...
    </>
    )
}

뭐가 잘못됐다는건가?

  • 리액트 문서에서 확인할 수 있듯이, refkey와 함께 special props에 해당한다.
    참고: https://ko.reactjs.org/warnings/special-props.html
  • 그렇기 떄문에 위와 같이 전달하게 되면 아래과 같은 경고문구가 보일 것이다.
Warning: Input: `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. (https://reactjs.org/link/special-props)

이때 forwardRef를 사용한다.

  • 그렇다면 ref를 전달하고 싶을 때는 어떻게 하는가?
  • 위의 InputComponent를 forwardRef로 감싸면 ref를 전달할 수 있게 된다.
  • 물론 ref prop이 아니라 ref1, ref2, inputRef 등으로 전달해도 문제는 없다.
  • 그러나 이런 방식은 함께 일하는 개발자들에게 혼란을 줄 수 있습니다. 그렇기 때문에 react 공식문서에서 추천하는 방법을 사용하는 것이 좋다고 생각합니다.
  • forwardRef 내부 함수의 2번째 매개변수에 ref가 들어가는 것을 볼 수 있다.
  • 2번째 매개변수의 ref를 사용하면 된다. 첫 번째 매개변수에는 추가적인 props들이 전달된다.
import React, { useRef } from 'react'

const Input = forwardRef((props, ref) => {
	return <input ref={ref} />;
})

function ParentComponent() {
	const inputRef = useRef(null);
    
    ...(생략)...
    return (
    <>
    	<Input ref={inputRef} />
        ...(생락)...
    </>
    )
}

결론

  • HTML에 직접 접근하여 제어하고 싶은 경우 ref를 쓴다.
  • react에서는 컴포넌트에 ref 라는 props를 사용할 수 없다.
  • forwardRef 를 사용하여 ref를 전달할 수 있다. (내부 함수의 2번째 매개변수로 자동으로 들어간다)

0개의 댓글