React : forwardRef에 대해서

자식 컴포넌트에서 부모 컴포넌트의 메서드나 속성 등에 접근해야할 때는 props를 사용했었다. 그 반대의 경우, 즉 부모 컴포넌트가 자식 컴포넌트의 메서드나 속성에 접근해야할 때 사용하는 것이 forwardRef이다. forwardRef와 useImperativeHandle의 경우 무분별하게 사용하면 성능이 떨어진다는 단점이 있다. 

• const 컴포넌트명 = forwardRef((props, ref) => {(렌더링 할 요소)})
  - props : 부모 컴포넌트가 전달한 메서드나 속성 등
  - ref : 부모 컴포넌트가 전달한 ref 속성
  
• useImperativeHandle(ref, () => ({부모컴포넌트에 전달할 값}))
  useImperativeHandle은 ref를 통해서 부모 컴포넌트에 어떤 값을 전달할지 정의한다. 
  - ref: 부모 컴포넌트가 전달한ref속성
  

 

forwardRef 사용하기

1. 부모 컴포넌트에서 useRef를 통해 자식 컴포넌트에 ref를 전달한다.

<<Parent.jsx>>

import { useRef } from "react"
import Child from "./Child";

export default function Parent() {
    const inputRef = useRef();

    return (
        <>
            <Child ref={inputRef} />
        </>
    );
}

 

2. 자식 컴포넌트를 forwardRef로 감싸고, useImperativeHandle을 통해 부모 컴포넌트가 ref를 통해 접근할 수 있는 값을 정의한다.

- input의 값을 'text' state에 저장하고, useImperativeHandle을 통해서 'text'를 콘솔로 출력하는 logValue 라는 메서드를 부모 컴포넌트에 전달한다.

<<Child.jsx>>

import { forwardRef, useImperativeHandle, useState } from "react";

const Child = forwardRef((props, ref) => {
    const [text, setText] = useState();

    useImperativeHandle(ref, () => ({
        logValue: () => {
            console.log(text);
        }
    }));

    return (
        <input ref={ref} onChange={(e) => setText(e.target.value)} type="text" />
    );
});

export default Child;

 

3. 부모 컴포넌트에서 ref.current.logValue()를 호출하여 자식 컴포넌트의 logValue 메서드를 시행한다. 

<<Parent.jsx>>

import { useRef } from "react"
import Child from "./Child";

export default function Parent() {
    const ref = useRef();
    console.log(ref);

    return (
        <>
            <Child ref={ref} />
            <button onClick={() => ref.current.logValue()}> 출력 </button>
        </>
    );
}