React에서 함수형 컴포넌트는 간단하면서도 강력한 기능을 제공합니다. 그러나 때로는 함수형 컴포넌트의 렌더링 최적화가 필요할 수 있습니다. 이 글에서는 React.forwardRef()를 사용하여 함수형 컴포넌트의 렌더링 성능을 최적화하는 방법에 대해 알아보겠습니다.

React.forwardRef()란?

React.forwardRef()는 React 16.3 버전 이후에 추가된 기능으로, ref 속성을 전달받아 자식 컴포넌트로 전달하는 데 사용합니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있습니다.

이 기능을 사용하면 함수형 컴포넌트에서도 ref 속성을 사용할 수 있으므로, 클래스형 컴포넌트와 동일한 기능을 구현할 수 있습니다.

React.forwardRef()를 사용한 최적화 방법

React.forwardRef()를 활용하여 함수형 컴포넌트를 최적화하는 방법은 다음과 같습니다.

1. 불필요한 렌더링 방지

React.memo()와 함께 사용하면, props가 변경되지 않았을 때 렌더링을 방지할 수 있습니다. 이를 통해 컴포넌트의 성능을 향상시킬 수 있습니다.

const MyComponent = React.forwardRef((props, ref) => {
  // 컴포넌트 로직

  return (
    // 컴포넌트 JSX
  );
});

export default React.memo(MyComponent);

2. 자식 컴포넌트로 ref 전달

자식 컴포넌트에 ref 속성을 전달하여 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있습니다. 이를 통해 자식 컴포넌트의 상태나 메서드를 부모 컴포넌트에서 제어할 수 있습니다.

const ChildComponent = React.forwardRef((props, ref) => {
  // 컴포넌트 로직

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

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleButtonClick = () => {
    childRef.current.scrollTo(0, 0); // 자식 컴포넌트의 메서드 호출
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>Scroll to top</button>
    </div>
  );
};

이처럼 React.forwardRef()를 사용하여 자식 컴포넌트에 ref를 전달하면 컴포넌트 간의 효율적인 상호작용을 구현할 수 있습니다.

마무리

React.forwardRef()를 활용하여 함수형 컴포넌트의 렌더링 최적화 방법에 대해 알아보았습니다. 이를 통해 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 성능을 달성할 수 있습니다. 렌더링 성능을 개선하여 사용자 경험을 향상시키기 위해 React.forwardRef()를 적절히 활용해보세요!

#React #렌더링최적화