React에서는 ref를 사용하여 DOM 요소에 직접 접근할 수 있습니다. 하지만 일부 경우에는 자식 컴포넌트에 있는 ref를 부모 컴포넌트에서 직접 사용해야 하는 상황이 있습니다. 이때 React.forwardRef()를 사용할 수 있습니다.

React.forwardRef()는 부모 컴포넌트에서 자식 컴포넌트의 ref에 접근할 수 있도록 해주는 기능입니다. 이를 사용하면 부모 컴포넌트에서 직접 자식 컴포넌트의 DOM 요소에 접근할 수 있으며, 이는 자식 컴포넌트에서 ref를 사용해야 하는 상황에서 특히 유용합니다.

예를 들어, 자식 컴포넌트에서 타이머를 만들고 이를 부모 컴포넌트에서 제어하고자 할 때 React.forwardRef()를 사용할 수 있습니다. 부모 컴포넌트에서는 자식 컴포넌트의 타이머를 시작, 일시정지, 종료하는 등의 작업을 실행할 수 있게 됩니다.

import React, { forwardRef, useRef } from 'react';

const Timer = forwardRef((props, ref) => {
  const timerRef = useRef(null);

  const start = () => {
    // 타이머 시작 로직
  };

  const pause = () => {
    // 타이머 일시정지 로직
  };

  const stop = () => {
    // 타이머 종료 로직
  };

  // ref 전달
  React.useImperativeHandle(ref, () => ({
    start,
    pause,
    stop
  }));

  return <div>Timer Component</div>;
});

export default function ParentComponent() {
  const timerRef = useRef(null);

  const handleClick = () => {
    // 자식 컴포넌트의 타이머를 제어하는 예시 함수
    timerRef.current.start();
  };

  return (
    <div>
      <button onClick={handleClick}>Start Timer</button>
      <Timer ref={timerRef} />
    </div>
  );
}

위 예시에서는 Timer 컴포넌트를 부모 컴포넌트에서 제어하기 위해 forwardRef를 사용했습니다. ParentComponent에서 timerRef를 생성하고, handleClick 함수에서 timerRef.current.start()와 같이 자식 컴포넌트의 메서드를 호출하는 것이 가능해집니다.

React.forwardRef()를 사용하면 부모 컴포넌트에서 자식 컴포넌트의 ref에 접근하여 필요한 작업을 수행할 수 있게 됩니다. 이는 컴포넌트 간에 상호작용이 필요한 경우나 외부에서 컴포넌트를 제어해야 하는 경우에 유용한 기능입니다.

#React #React.forwardRef