HOC?

HOC(Higher Order Component)?

HOC는 기존의 React 컴포넌트를 확장하여 기능을 추가하거나 변경하는 데 사용되는 패턴이다. 초기 React에서는 로직의 재사용을 위해 HOC가 많이 사용되었지만, 최근에는 주로 Hook이나 다른 패턴이 더 많이 사용되고 있다.

 

내가 찾아본 예시로는 이런 코드가 있었다.

import React from 'react';

// Higher Order Component 정의
const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} is mounted`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} is unmounted`);
    }

    render() {
      // WrappedComponent에 props를 전달하여 렌더링
      return <WrappedComponent {...this.props} />;
    }
  };
};

// 예시로 사용할 기본 컴포넌트
const MyComponent = () => {
  return <div>Hello, world!</div>;
};

// HOC를 사용하여 기본 컴포넌트를 감쌉니다.
const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

HOC의 단점

1. 복잡성 및 가독성:

• HOC를 많이 사용하게 되면 컴포넌트 간의 의존성이 깊어지고, 코드가 복잡해지면서 가독성이 떨어질 수 있다. 이러한 상황에서는 디버깅도 어려워진다.

2. props의 충돌:

• 여러 HOC를 사용하다 보면 상위 컴포넌트와 하위 컴포넌트 간의 props 이름이 중복될 수 있다. 이는 잠재적인 오류를 발생시킬 수 있다.

3. 컴포넌트 컴포지션의 어려움:

• HOC는 컴포넌트를 감싸는 래퍼 컴포넌트로 동작하기 때문에, 컴포넌트 컴포지션(컴포넌트를 조합하여 더 큰 컴포넌트를 만드는 것)이 어렵게 된다. 또한, HOC를 사용하는 컴포넌트를 추적하고 관리하기도 어려울 수 있다.

 

HOC의 대안

1. React Hooks:

• Hook을 사용하면 컴포넌트 내에서 로직을 쉽게 추출하고 재사용할 수 있다. HOC를 사용하는 것보다 가독성과 유지보수성이 향상된다.

2. Render Props:

• Render Props 패턴은 로직의 재사용을 위해 상위 컴포넌트에서 하위 컴포넌트로 함수를 props로 전달하여 재사용하는 방법이다. 이러한 방식은 컴포넌트 간의 컴포지션을 쉽게 구현할 수 있으며, 로직 재사용성을 높일 수 있다.

3. 컴포넌트 컴포지션:

• 작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 만드는 패턴이다. 이 패턴을 사용하면 컴포넌트 간의 결합도를 낮출 수 있다.

 

정리

HOC는 복잡성, 가독성, 재사용성의 측면에서 어려움이 있기 때문에 사용이 줄어들고 있으며, HOC의 대안으로는 Hooks, Render Props 패턴, 그리고 컴포넌트 컴포지션이 있습니다.