React에서는 forwardRef()라는 메소드를 제공하여 컴포넌트의 렌더링을 결정할 수 있습니다. 이 메소드를 사용하면 부모 컴포넌트로부터 전달받은 ref를 자식 컴포넌트 내부 요소에 전달할 수 있습니다. 이를 통해 컴포넌트 간의 통신과 동작 제어를 좀 더 유연하게 처리할 수 있습니다.

forwardRef() 메소드의 사용법

forwardRef() 메소드를 사용하여 컴포넌트를 작성하는 방법은 다음과 같습니다.

const ChildComponent = React.forwardRef((props, ref) => {
  // ref를 사용할 컴포넌트 내부 로직 작성
  // ref를 필요한 DOM 요소에 적용하는 방법 등

  return <div ref={ref}>자식 컴포넌트</div>;
});

const ParentComponent = () => {
  const ref = React.createRef();

  return (
    <div>
      {/* 자식 컴포넌트에 ref를 전달 */}
      <ChildComponent ref={ref} />
    </div>
  );
};

위의 예시에서는 forwardRef() 메소드를 사용하여 ChildComponent를 작성하고 있습니다. forwardRef() 메소드의 콜백 함수에서 ref를 사용하여 컴포넌트 내부 로직을 작성할 수 있습니다. 그리고 ref를 div 요소에 적용하여 부모 컴포넌트에서 전달한 ref를 자식 컴포넌트의 DOM 요소에 연결합니다.

부모 컴포넌트인 ParentComponent에서는 createRef()를 사용하여 ref를 생성하고, ChildComponent에 ref를 전달합니다.

이렇게 하면 ParentComponent에서 ref.current를 통해 자식 컴포넌트의 DOM 요소에 접근할 수 있습니다.

forwardRef()를 사용하는 경우

forwardRef()를 사용하면 다음과 같은 경우에 유용합니다.

• 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소에 직접 접근해야 하는 경우
• 자식 컴포넌트의 메소드를 호출하거나 속성 값을 변경해야 하는 경우
• 자식 컴포넌트와 부모 컴포넌트 간의 커뮤니케이션을 하는 경우

forwardRef()를 사용하면 컴포넌트 간의 상호작용을 좀 더 유연하게 처리할 수 있으며, 코드의 가독성을 향상시킬 수 있습니다.

더 자세한 내용과 예시는 React 공식 문서를 참고하시기 바랍니다.

#React #ReactHooks