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} />
...(생락)...
</>
)
}
뭐가 잘못됐다는건가?
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번째 매개변수로 자동으로 들어간다)