[Ch7] Higher-order components in modern world

React의 다양한 조합 기술 중 하나인 고차 컴포넌트(Higher-Order Component, HOC)에 대해 알아보자.

고차 컴포넌트란?

React 공식 문서에 따르면, HOC는 컴포넌트 로직을 재사용하는 기술이다. 쉽게 말해, 컴포넌트를 인자로 받아 내부에서 특정 로직을 실행한 후 새로운 컴포넌트를 반환하는 함수이다.

기본적인 HOC 패턴

const withSomeLogic = (Component) => {
  return (props) => <Component {...props} />;
};

const Button = ({ onClick }) => (
  <button onClick={onClick}>Button</button>
);
const ButtonWithSomeLogic = withSomeLogic(Button);

HOC는 기존 컴포넌트의 기능을 확장할 수 있으며, 구현 방식이 간단하면서도 강력한 확장성을 제공한다.

고차 컴포넌트를 활용한 props 주입

HOC는 컴포넌트에 props를 주입하는 용도로 자주 사용된다. 예를 들어, 아래의 코드에서는 테마 정보를 모든 컴포넌트에 자동으로 전달한다.

const withTheme = (Component) => {
  const theme = isDark ? "dark" : "light";
  return (props) => <Component {...props} theme={theme} />;
};

const Button = ({ theme }) => (
  <button className={theme}>Button</button>
);
const ButtonWithTheme = withTheme(Button);

이 패턴을 활용하면, 각 컴포넌트에서 theme을 직접 관리할 필요 없이, HOC를 적용하는 것만으로 자동으로 테마 정보를 사용할 수 있다.

고차 컴포넌트 배경

HOC는 Redux의 connect 함수, React Router의 withRouter 등에서 널리 사용되었다.

하지만 훅 등장 이후 HOC의 사용 빈도가 줄어들었으며, 많은 경우 useTheme 같은 훅을 활용하여 HOC를 대체하고 있다.

const Button = () => {
  const { theme } = useTheme();
  return <button className={theme}>Button</button>;
};

HOC는 한때 코드의 모듈화와 재사용성을 높이는 중요한 패턴이었지만, 지금은 훅을 이용한 해결 방식을 선호한다.

고차 컴포넌트 사용 사례

✅ HOC를 활용하면 콜백 함수 실행 시 공통적인 로직(예: 로깅)을 추가할 수 있다.

export const withLoggingOnClick = (Component) => {
  return (props) => {
    const onClick = () => {
      console.log("Log on click something");
      if (props.onClick) props.onClick();
    };
    return <Component {...props} onClick={onClick} />;
  };
};

export const ButtonWithLoggingOnClick = withLoggingOnClick(Button);

 

✅ 컴포넌트 마운트 시 로그를 남기는 HOC를 구현할 수도 있다.

export const withLoggingOnMount = (Component) => {
  return (props) => {
    useEffect(() => {
      console.log("log on mount");
    }, []);
    return <Component {...props} />;
  };
};

HOC를 활용하면, 모든 컴포넌트에서 생명주기 로직을 중복 작성할 필요 없이, 한 곳에서 처리할 수 있다.

✅ 고차 컴포넌트를 활용하여 특정 DOM 이벤트를 가로챌 수도 있다.

export const withSuppressKeyPress = (Component) => {
  return (props) => {
    const onKeyPress = (event) => event.stopPropagation();
    return (
      <div onKeyPress={onKeyPress}>
        <Component {...props} />
      </div>
    );
  };
};

const ModalWithSuppressedKeyPress = withSuppressKeyPress(Modal);

고차 컴포넌트의 장단점

✅ 장점

• 로직을 분리하여 코드 재사용성을 높일 수 있다.
• props를 조작하여 다양한 기능을 유연하게 추가할 수 있다.
• 생명주기 이벤트나 특정 동작을 중앙에서 관리할 수 있다.

❌ 단점

• 컴포넌트 구조가 깊어질수록 디버깅이 어려울 수 있다.
• 불필요한 중첩이 발생할 가능성이 있다.
• React의 최신 패턴(훅)과 비교했을 때, 상대적으로 코드 가독성이 떨어질 수 있다.

정리

• 고차 컴포넌트는 단순한 함수로, 기존 컴포넌트에 새로운 기능을 추가하는 역할을 한다.
• props 주입, 콜백 함수 향상, 생명주기 이벤트 관리, DOM 이벤트 가로채기 등 다양한 기능을 구현할 수 있다.
• 훅 등장 이후 사용 빈도가 줄었지만, 특정 상황에서는 유용하게 활용 가능하다.
• 코드를 재사용하고, 특정 기능을 분리할 때 효과적이지만, 필요 이상으로 중첩되면 코드 가독성이 저하될 수 있다.