[React] forwardRef

 

[React] forwardRef

React의 forwardRef는 부모 컴포넌트가 자식 컴포넌트의 DOM 노드나 클래스 인스턴스에 접근할 수 있게 해주는 고차 컴포넌트(Higher-Order Component)입니다.

이를 통해 부모 컴포넌트가 자식 컴포넌트의 특정 요소에 직접 접근하고 조작할 수 있습니다.

 

 

기본 사용법

forwardRef는 React의 기본 내장 함수로, 다음과 같은 형태로 사용됩니다:

import React, { forwardRef } from 'react';

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

export default MyInput;

 

 

동작 방식

1. Ref 전달:
   • forwardRef는 함수 컴포넌트에 ref 매개변수를 추가로 전달합니다.
   • 부모 컴포넌트가 전달한 ref는 자식 컴포넌트 내부의 DOM 노드나 클래스 인스턴스에 연결됩니다.
2. 사용 예시:
   • 부모 컴포넌트에서 자식 컴포넌트의 DOM 노드에 접근할 수 있습니다.

 

 

예제

자식 컴포넌트 정의

먼저, forwardRef를 사용하여 자식 컴포넌트를 정의합니다.

import React, { forwardRef } from 'react';

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

export default MyInput;

 

 

부모 컴포넌트에서 Ref 사용

이제 부모 컴포넌트에서 자식 컴포넌트의 ref에 접근할 수 있습니다.

import React, { useRef } from 'react';
import MyInput from './MyInput';

function ParentComponent() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <MyInput ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

export default ParentComponent;

 

 

장점

• 캡슐화 유지: 자식 컴포넌트의 내부 구현을 외부로 노출하지 않으면서 DOM에 접근할 수 있습니다.
• 유연성: 다양한 컴포넌트 간에 ref를 전달하여 보다 유연한 상호작용을 구현할 수 있습니다.

 

 

요약

React의 forwardRef는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있게 해주는 유용한 기능입니다.

이를 통해 컴포넌트 간의 유연한 상호작용과 DOM 조작이 가능해집니다.

간단한 사용법과 함께 예제를 통해 쉽게 이해할 수 있습니다.