💻 고차 컴포넌트(HOC)(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 고차 컴포넌트는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴이다.

고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

컴포넌트는 props를 UI로 변환하는 반면에, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환한다.

횡단 관심사(Cross-Cutting Concerns)에 고차 컴포넌트 사용하기

• Cross-Cutting Concerns란?
  

• 횡단 관심사란? - 블로그(횡단 관심사) 참조

규모가 큰 애플리케이션에서 동일한 패턴이 반복적으로 발생한다고 가정해보자. 그렇게 되면 이 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 하는 추상화가 필요하다. 이러한 경우에 고차 컴포넌트를 사용하면 좋다.

DataSource 를 구독하는 CommentList 나 BlogPost 같은 컴포넌트를 생성하는 함수를 작성할 수 있다. 구독한 데이터를 prop으로 전달받는 자식 컴포넌트를 파라미터 중 하나로 받는 함수를 만든다.

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);

첫번째 파라미터는 래핑된 컴포넌트이고, 두 번째 파라미터는 DataSource와 현재 props를 가지고 컴포넌트에서 관심있는 데이터를 검색한다.

CommentListWithSubscription 과 BlogPostWithSubscription 가 렌더링될 때 CommentList
와 BlogPost 는 DataSource 에서 가장 최근에 검색된 데이터를 data prop으로 전달한다.

// 이 함수는 컴포넌트를 매개변수로 받고..
function withSubscription(WrappedComponent, selectData) {
  // ...다른 컴포넌트를 반환하는데...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ... 구독을 담당하고...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... 래핑된 컴포넌트를 새로운 데이터로 랜더링
      // 컴포넌트에 추가로 props를 내려주는 것에 주목!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

고차 컴포넌트는 입력된 컴포넌트를 수정하지 않으며 상속을 사용하여 동작을 복사하지도 않는다. 오히려 고차 컴포넌트는 원본 컴포넌트를 컨테이너 컴포넌트로 포장하여 조합한다. 고차 컴포넌트는 사이드 이펙트가 전혀 없는 순수 함수이다.

원번 컴포넌트를 변경하지 마세요. 조합(Composition)하세요.

고차 컴포넌트 내부에서 컴포넌트의 프로토타입을 수정하지 않도록 한다.

function logProps(InputComponent) {
  InputComponent.prototype.componentDidUpdate = function(prevProps) {
    console.log('Current props: ', this.props);
    console.log('Previous props: ', prevProps);
  };
  // 원본의 입력을 반환한다는 것은 이미 변형되었다는 점을 시사한다.
  return InputComponent;
}

// EnhancedComponent 는 props를 받을 때 마다 log를 남긴다.
const EnhancedComponent = logProps(InputComponent);

위의 코드에는 몇 가지 문제가 있다.

그 중 하나는 입력된 컴포넌트를 확장된 컴포넌트와 별도로 재사용할 수 없다는 것이다. 더 중요한 것은, componentDidUpdate를 변형하는 EnhancedComponent에 또 다른 HOC를 적용하면 첫 번째 HOC의 기능은 무시된다. 이 HOC는 생명주기 메서드가 없는 함수 컴포넌트에서도 잘동하지 않는다.

변경된 HOC는 누출된 추상화입니다. Consumer는 다른 HOC와의 충돌을 피하기 위하여 어떻게 구현되어있는지 반드시 알아야 한다. HOC는 변경대신에 입력 컴포넌트를 컨테이너 구성요소로 감싸서 조합을 사용해야 한다.

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('Current props: ', this.props);
      console.log('Previous props: ', prevProps);
    }
    render() {
      // 들어온 component를 변경하지 않는 container이다.
      return <WrappedComponent {...this.props} />;
    }
  }
}

위 고차 컴포넌트는 충돌 가능성을 피하면서 프로토타입을 직접 변경하는 버전과 동일하게 작동한다.

컨벤션: 래핑된 컴포넌트를 통해 관련없는 Props 전달하기

고차 컴포넌트는 정의를 과감하게 변경해서는 안된다. 고차 컴포넌트에서 반환된 컴포넌트는 래핑된 컴포넌트와 비슷한 인터페이스가 있어야 한다. 고차 컴포넌트는 특정 관심사와 관련이 없는 props를 활용해야 한다. 대부분의 고차 컴포넌트에는 다음과 같은 렌더링 메서드가 포함되어 있다.

render() {
  // 이 HOC에만 해당되므로 추가된 props는 걸러내어 이 HOC에 전달되지 않도록 한다.
  const { extraProp, ...passThroughProps } = this.props;

  // 이 Props는 일반적으로 Status값 또는 Instance method 이다.
  const injectedProp = someStateOrInstanceMethod;

  // wrapped component에 props를 전달합니다.
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}

컨벤션: 조합 가능성(Composability) 끌어올리기

고차 컴포넌트는 때때로 단일 인수로 래핑된 컴포넌트만 받을 때도 있다.

const NavbarWithRouter = withRouter(Navbar);

고차 컴포넌트에 대한 가장 일반적인 사용은 다음과 같다.

// React Redux의 `connect`
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

위의 코드는 아래와 같이 분해할 수 있다.

// connect는 다른 함수를 반환하는 함수이다. 
const enhance = connect(commentListSelector, commentListActions);
// 반환된 함수는 Redux store에 연결된 컴포넌트를 반환하는 고차 함수 컴포넌트 이다.
const ConnectedComment = enhance(CommentList);

connect 함수에 의해 반환된 것과 같은 단일 인수 고차 컴포넌트는 Component => Component 특징을 가지고 있습니다. 출력 타입이 입력 타입과 동일한 함수는 정말 쉽게 조합할 수 있다.

컨벤션: 간단한 디버깅을 위한 디스플레이 네임 작성 방법

가장 일반적인 방법은 HOC의 이름으로 내부 컴포넌트명을 감싸는 것이다. 따라서 HOC의 이름이 withSubscription이고, HOC 내부의 컴포넌트의 이름이 CommentList 인 경우, 디스플레이 네임은 WithSubscription(CommentList)을 사용한다.

unction withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

즉, 고차 컴포넌트 이름(컴포넌트이름) 형식으로 만드는 것이다. 리액트 개발자 도구에서는 고차 컴포넌트 이름 대신에 실제 래핑할 컴포넌트 이름ㅇ르 보여준다.

주의사항

render 메서드 안에서 고차 컴포넌트를 사용하지 마세요

render() {
  // render가 호출될 때마다 새로운 버전의 EnhancedComponent가 생성된다.
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 때문에 매번 전체 서브트리가 마운트 해제 후 다시 마운트 된다!
  return <EnhancedComponent />;
}

여기서 성능상의 문제뿐만 아니라 컴포넌트가 다시 마운트 되면서 컴포넌트의 state와 컴포넌트의 하위 항목들이 손실된다. 대신에 컴포넌트의 정의 바깥에 HOC를 적용하여 컴포넌트가 한 번만 생성되도록 한다. 그러면 해당 component는 여러번 렌더링이 되더라도 일관성을 유지한다.

정적 메서드는 반드시 따로 복사하세요

컴포넌트에 HOC를 적용하면, 기존 컴포넌트는 컨테이너의 컴포넌트로 감싸진다. 즉, 새 컴포넌트는 기존 컴포넌트의 정적 메서드를 가지고 있지 않는다.

// 정적 함수를 정의
WrappedComponent.staticMethod = function() {/*...*/}
// HOC를 적용
const EnhancedComponent = enhance(WrappedComponent);

// 향상된 컴포넌트에는 정적 메서드가 없다.
typeof EnhancedComponent.staticMethod === 'undefined' // true

위 문제를 해결하기 위해 메서드를 반환하기 전에 컨테이너에 복사한다.

function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  // 복사 할 메서드를 정확히 알아야 함
  Enhance.staticMethod = WrappedComponent.staticMethod;
  return Enhance;
}

ref는 전달되지 않는다

고차 컴포넌트는 모든 props를 래핑된 컴포넌트에 전달하는 것이 원칙이지만, refs에서는 작동하지 않는다.

컴포넌트가 HOC의 결과인 엘리먼트에 ref를 추가하는 경우, ref는 래핑된 컴포넌트가 아닌 가장 바깥쪽 컨테이너 컴포넌트의 인스턴스를 나타낸다.

참조 → 💻 Ref 전달하기(feat. 리액트 공식문서)

🔥 느낀점

로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 하는 추상화가 필요할 때 고차 컴포넌트를 사용한다는 것을 기억해야겠다. 즉, 횡단 관심사 문제를 해결하는 것이 고차 컴포넌트의 역할인 것이다.
횡단 관심사라는 것도 처음 알았고 어떨 때 hoc 를 사용해야하는지 알게 되었다.

Refer

• 고차 컴포넌트
• 클린코드 책을 읽고서 Chapter. 시스템 with 횡단관심사란?
• 횡단 관심사 - 위키백과