[React] 고차 컴포넌트(Higher-Order Components, HOCs)와 렌더 프롭스(Render Props)

React에서 고차 컴포넌트(Higher-Order Components, HOCs)와 렌더 프롭스(Render Props)는 컴포넌트 로직을 재사용하기 위한 두 가지 중요한 패턴입니다. 이들 각각은 React 애플리케이션의 구조와 유지보수성을 향상시키는 데 도움을 줄 수 있습니다. 이 글에서는 HOCs와 렌더 프롭스의 개념, 사용법, 그리고 각각의 장단점에 대해 자세히 알아보겠습니다.

1. 고차 컴포넌트(Higher-Order Components, HOCs)

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 함수로써, 하나의 컴포넌트를 받아 새로운 컴포넌트를 반환합니다. HOC는 React의 구성 가능한 특성을 활용하여, 컴포넌트 간에 공통적인 기능을 공유할 수 있게 해줍니다.

HOC의 예시

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props),
      };
    }

    componentDidMount() {
      // 데이터 소스를 구독합니다.
    }

    componentWillUnmount() {
      // 구독을 해제합니다.
    }

    render() {
      // 추가 props와 함께 WrappedComponent를 렌더링합니다.
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

HOC의 장단점

• 장점: 로직을 재사용할 수 있으며, 기존 컴포넌트를 수정하지 않고도 새로운 기능을 추가할 수 있습니다.
• 단점: React 개발자 도구에서 래퍼 컴포넌트가 많아져 디버깅이 어려워질 수 있으며, props의 충돌 가능성이 있습니다.

2. 렌더 프롭스(Render Props)

렌더 프롭스는 컴포넌트 간에 코드를 재사용하는 기술로, 컴포넌트가 어떤 것을 렌더링할지 결정하기 위해 함수 prop을 사용하는 패턴입니다. 이 패턴은 자식 컴포넌트가 렌더링될 때 자신이 받는 props 또는 state에 기반하여 어떤 것을 렌더링할지를 결정하게 해줍니다.

렌더 프롭스 예시

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

렌더 프롭스의 장단점

• 장점: 유연성이 높으며, 복잡한 컴포넌트 트리에 걸쳐 상태와 행위를 공유할 수 있습니다.
• 단점: 렌더링 메서드 또는 컴포넌트가 복잡해질 수 있으며, 가상 DOM에서 추가적인 컴포넌트 계층을 생성할 수 있습니다.

결론

HOCs와 렌더 프롭스는 각각의 사용 사례와 요구 사항에 따라 선택할 수 있습니다. HOCs는 고급 구성을 가능하게 하며, 렌더 프롭스는 더 유연한 코드 재사용 패턴을 제공합니다. 두 방법 모두 React 애플리케이션의 구조를 개선하고 코드의 재사용성을 높이는 데 큰 도움이 될 수 있습니다. 프로젝트의 목적과 필요에 따라 가장 적합한 패턴을 선택하시기 바랍니다.