forwardRef

 

🎯 forwardRef란 무엇일까요?

**forwardRef**는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있도록 도와주는 기능이에요.
조금 더 쉽게 말하면 **"부모가 자식의 특정 태그나 요소를 바로 가리키게 해준다"**라고 생각하면 돼요.

 

🍕 비유로 이해하기: 심부름꾼 이야기

여러분이 친구한테 마트에서 물건 좀 사다 달라고 부탁한다고 생각해 봐요.

• 여러분(부모)은 친구(자식)한테 심부름을 시켜요.
• 그런데 물건(입력 창, 버튼 등 DOM 요소)을 사 오게 할 때, 직접 그 물건을 가리킬 수 있어야 하겠죠?
• 이때 친구가 그 물건을 "여기 있어!"라고 직접 전달해주는 역할을 하는 게 **forwardRef**입니다.

 

🛠️ forwardRef 사용법

코드 예제를 통해 **forwardRef**를 어떻게 사용하는지 살펴볼게요.
부모 컴포넌트가 자식 컴포넌트의 input 요소에 바로 접근하는 예제를 보여드릴게요.

 

1. forwardRef를 사용한 자식 컴포넌트 만들기

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

import React, { forwardRef } from 'react';

// 자식 컴포넌트
const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} placeholder="여기에 입력해보세요!" />;
});

export default CustomInput;

설명:

• forwardRef: 자식 컴포넌트가 부모로부터 **ref**를 받을 수 있게 해줍니다.
• ref: 부모가 특정 요소(여기서는 input)를 직접 가리킬 수 있게 하는 참조(Reference)입니다.
• {...props}: 부모 컴포넌트에서 전달받은 속성들을 그대로 전달해요.

 

2. 부모 컴포넌트에서 ref 사용하기

부모 컴포넌트에서 useRef를 사용해 자식의 input 요소에 접근해 보겠습니다.

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

function ParentComponent() {
  const inputRef = useRef(null); // 참조를 저장할 ref 생성

  const focusInput = () => {
    // 자식의 input 요소에 직접 접근해서 포커스 설정
    inputRef.current.focus();
  };

  return (
    <div>
      <h2>forwardRef 예제</h2>
      <CustomInput ref={inputRef} /> {/* ref 전달 */}
      <button onClick={focusInput}>입력창에 포커스하기</button>
    </div>
  );
}

export default ParentComponent;

🔍 코드 설명

1. 자식 컴포넌트(CustomInput)
   • forwardRef를 사용해서 부모가 ref를 자식의 input에 연결할 수 있도록 만들었습니다.
2. 부모 컴포넌트(ParentComponent)
   • useRef를 사용해서 참조를 생성하고, 자식 컴포넌트에 ref를 전달합니다.
   • 버튼 클릭 시 **ref.current.focus()**를 통해 자식의 input에 포커스를 설정합니다.
3. 결과
   • 버튼을 클릭하면 입력창에 자동으로 포커스가 맞춰집니다.

 

🚀 실행 결과

1. 화면에 입력창과 "입력창에 포커스하기" 버튼이 표시됩니다.
2. 버튼을 클릭하면 입력창에 자동으로 포커스가 맞춰져요.

 

🌟 forwardRef를 사용하는 이유

1. DOM 요소에 직접 접근해야 할 때
   • 입력창에 포커스를 주거나, 특정 DOM 요소에 애니메이션을 적용할 때 유용합니다.
2. 자식 컴포넌트의 요소를 부모가 제어할 때
   • 부모 컴포넌트가 자식 컴포넌트 내부의 요소를 제어해야 하는 상황에서 사용해요.
3. 컴포넌트 재사용성
   • forwardRef를 사용하면 다른 컴포넌트에서도 쉽게 재사용할 수 있어요.

 

🚨 주의할 점

• ref는 DOM 요소에만 사용할 수 있어요.
  forwardRef를 사용하지 않으면 부모는 자식 컴포넌트의 DOM 요소에 접근할 수 없습니다.
• 직접 DOM 조작은 최소화하세요.
  React의 기본 원칙은 **"선언형 UI"**이기 때문에 너무 자주 DOM을 조작하면 복잡해질 수 있어요.

 

🎉 마무리

React의 **forwardRef**는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 접근할 수 있도록 도와주는 기능이에요.

• 자식이 부모에게 ref를 전달해주기 때문에 더 세밀한 제어가 가능해요.
• 버튼 클릭 시 입력창에 포커스를 주는 것처럼 간단한 조작이 필요할 때 매우 유용하답니다.