[React] forwardRef

혜빈·2024년 7월 24일

REACT 보충개념

목록 보기

41/48

forwardRef

부모 컴포넌트에서 자녀 컴포넌트로 Ref를 전달할 때 사용하는 기법
특히 부모 컴포넌트가 자녀 컴포넌트의 DOM요소를 접근해야 할 때 유용하게 사용됨

버튼을 클릭하면 input에 focus를 주고싶다면?

컴포넌트 안에 ref를 만들고 input 태그 안에 ref 속성을 넣어주면 됨
ref는 input의 DOM node를 참조하게 되니까 버튼이 클릭될 때마다 focus함수를 호출해주면 됨

input이 아닌 input태그를 담은 하나의 컴포넌트로 만들어져있다면 같은 기능을 어떻게 구현할까?

자녀 컴포넌트의 input태그에 ref를 넣어줘야 하기 때문에 부모 컴포넌트의 ref를 자녀 컴포넌트로 전달할 필요가 있음

- 이때 사용할 수 있는게 forwardRef임

forwardRef를 사용하면 부모 컴포넌트는 마치 기본적인 element에 ref를 전달하듯 자녀 컴포넌트에게 ref를 전달할 수 있음

forwardRef 사용방법

ref를 전달받고자 하는 자녀 컴포넌트를 React에서 제공하는 forwardRef라는 함수로 감싸주기

forwardRef로 감싸진 자녀 컴포넌트는 새로운 두번째 인자를 전달 받게 됨(부모에게서 받은 ref)

자녀 컴포넌트는 전달받은 ref를 input태그의 ref속성으로 넣어주면 됨

실전 코드 실습

부모 컴포넌트

import { useRef } from "react";
import MyInput from "../components/MyInput";

function ForwardRef() {
  const inputRef = useRef();

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={focus}>집중</button>
    </div>
  );
}

export default ForwardRef;

자식 컴포넌트

방식 1

import { forwardRef } from "react";

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

export default forwardRef(MyInput);

방식 2


import React, { forwardRef } from "react";

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

export default MyInput;