[React Docs Beta] 1-2. forwardRef (1)

React Docs (beta) 번역 및 정리

Built-in React APIs

1. createContext

2. forwardRef

 

📍forwardRef

✅컴포넌트가 특정 DOM 노드를 ref를 가진 부모 컴포넌트에게 노출하게 해준다

즉, useRef로 만든 ref가 props로 타고 내려와 매개변수로 받아 지정할 DOM node를 활용하기 위한 기능

const SomeComponent = forwardRef(render)

 

📍forwardRef(render)

✅forwardRef를 호출하여 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하게 한다

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

 

✅매개변수

render

- 컴포넌트를 위한 렌더링 콜백 함수 (가짜 컴포넌트 같은 역할, forwardRef로 래핑하여 완성)

- 부모 컴포넌트로부터 받은 props와 ref를 render 함수의 매개변수로 함

 

✅반환값

- forwardRef는 JSX로 렌더링할  수 있는 컴포넌트를 반환

- ref를 prop으로 받을 수 있다 (일반 컴포넌트는 불가)

 

✅주의사항

- strict mode 에서는 render 함수가 2번 호출됨 (development 환경에서만)

- render 함수가 순수함수라면 (그리고 순수함수이어야 함) 당연히 사이드 이펙트 없음

 

📍render 함수

forwardRef의 매개변수이며, render 함수는 props와 ref를 매개변수로 받음

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

 

✅매개변수

props

- 부모 컴포넌트로부터 전달받은 props

 

ref

- 부모 컴포넌트로부터 전달받은 ref 어트리뷰트 (부모 컴포넌트에서 useRef로 선언됨)

- ref는 객체이거나 함수일 수 있다

- 전달받은게 없다면, 기본값은 null

- 전달받은 대로 다른 컴포넌트에 전달해주면 됨

 

📍DOM 노드를 부모 컴포넌트에 노출시키기 예제

DOM 노드 => MyInput 컴포넌트가 리턴하는 input element

부모 컴포넌트 => App.js의 Form 컴포넌트

 

MyInput은 forwardRef로 만든 컴포넌트이므로 ref를 받을 수 있다

부모 컴포넌트에서 useRef로 만든 ref 를 받는 용도이다

 

MyInput.js

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} /> // ref를 받기 위해서 사용
    </label>
  );
});

export default MyInput;

 

App.js

import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function Form() {
  const ref = useRef(null); // ref 선언

  function handleClick() {
    ref.current.focus(); // ref로 지정한 컴포넌트 focus하는 이벤트 핸들러
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} /> // ref 지정
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}