Colin's Blog
React.forwardRef()를 활용하여 React 클래스 컴포넌트의 렌더링 최적화 방법에 대해 알려주세요.

React의 클래스 컴포넌트는 state와 lifecycle 메서드를 활용하여 동적인 UI를 구축하는 데 탁월한 성능을 보입니다. 그러나 클래스 컴포넌트에서 렌더링 최적화를 위해 조금 더 작업이 필요할 때가 있습니다. 이때 React.forwardRef()를 활용할 수 있습니다.

React.forwardRef()는 Ref를 자식 컴포넌트로 전달하기 위해 사용되는 고급 기능입니다. 기본적으로 React에서 Ref는 부모 컴포넌트의 DOM 요소를 자식 컴포넌트에서 접근할 수 있게 해줍니다. 그러나 클래스 컴포넌트는 Ref를 직접 전달할 수 없기 때문에 React.forwardRef()를 사용하여 이를 가능하게 할 수 있습니다.

아래는 React.forwardRef()를 사용하여 클래스 컴포넌트의 렌더링 최적화를 수행하는 예시 코드입니다.

import React, { forwardRef } from 'react';

class MyClassComponent extends React.Component {
  // ...
  
  render() {
    // ...
  }
}

const ForwardedComponent = forwardRef((props, ref) => (
  <MyClassComponent {...props} forwardedRef={ref} />
));

export default ForwardedComponent;

위의 예시에서는 MyClassComponent를 ForwardedComponent로 감싸주고, forwardRef 함수를 사용하여 ref를 전달할 수 있도록 합니다. 이제 ForwardedComponent를 사용하는 부모 컴포넌트에서는 ref를 사용하여 MyClassComponent의 DOM 요소를 조작할 수 있습니다.

React.forwardRef()를 활용하는 이점은 렌더링 최적화에 있습니다. 만약 MyClassComponent가 자식 컴포넌트를 가지고 있고, 부모 컴포넌트에서 ForwardedComponent를 여러 번 렌더링한다면, React.forwardRef()를 사용하여 자식 컴포넌트가 불필요하게 리렌더링되는 것을 방지할 수 있습니다.

React.forwardRef()의 사용은 클래스 컴포넌트의 렌더링 최적화에 사용될 수 있는 강력한 도구입니다. 이를 적절히 활용하면 성능 향상을 기대할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.