React 고차 컴포넌트(HOC)

고차 컴포넌트(Higher-Order Components)

---

고차 컴포넌트(HOC)는 React에서 컴포넌트를 재사용하는 한 가지 패턴이다.
이는 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수이다.

HOC는 주로 코드 중복을 줄이고, 컴포넌트 로직을 재사용할 수 있게 한다.

컴포넌트를 입력받아, 추가적인 기능이나 데이터를 주입한 새로운 컴포넌트를 반환하는 함수이다.
고차 컴포넌트를 사용하면 컴포넌트 간의 공통된 로직을 추출하여 재사용할 수 있다.

예시코드

---

고차 컴포넌트 사용 전

const BgBox = styled.div`
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

function Main() {
  return (
    <main>
      <BgBox>
        <ExpensesFormBgBox myData="hello" />
      </BgBox>

      <BgBox>
        <MonthlyBgBox />
      </BgBox>

      <BgBox>
        <ExpensesListBgBox />
      </BgBox>
    </main>
  );
}

위와 같이 BgBox의 중복코드를 제거하고 싶었다.
이와 같은 중복 패턴을 고차 컴포넌트를 사용하여 리팩토링 해보았다.

고차 컴포넌트 사용 후

---

const BgBox = styled.div`
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

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

const ExpensesFormBgBox = withBgBox(ExpensesForm);
const MonthlyBgBox = withBgBox(Monthly);
const ExpensesListBgBox = withBgBox(ExpensesList);

function Main() {
  return (
    <main>
      <ExpensesFormBgBox myData="hello" />
      <MonthlyBgBox />
      <ExpensesListBgBox />
    </main>
  );
}

BgBox의 중복을 제거하기 위해 고차 컴포넌트를 사용하여 withBox에 Component를
인자로 받아서 BgBox로 감싸는 새로운 컴포넌트를 반환한다.

결론

---

사용 전 코드는ExpensesFormBgBox, MonthlyBgBox, ExpensesListBgBox는 BgBox컴포넌트를 감싸고 있었다.
이러한 중복을 제거하고 재사용성을 높이기 위해 고차 컴포넌트(HOC)를 사용하여
BgBox로 감싸는 새로운 컴포넌트를 반환했다.

이 방식으로 컴포넌트를 감싸는 공통 로직을 한 곳에 모아 관리할 수 있었으며,
코드중복을 줄이고 유지보수성을 향상 시킬 수 있었다.