README.md

HOC (Higher Order Components)

HOC(고차 컴포넌트)는 컴포넌트를 받고 추가적인 데이터나 기능이 추가된 컴포넌트를 반환하는 패턴입니다. React 에서 HOC 가 쓰이는 이유는 상속보다 합성을 선호하기 때문입니다.

HOC 는 컴포넌트의 기능을 증가시키거나 수정하여 컴포넌트 재사용과 코드 공유를 용이하게 하는 메커니즘을 제공하지만, HOC 으로 처리할 수 있는 부분은 대부분 Hook 으로 대체가 가능하며, Hook 이 더 나은 개발자 경험을 제공하고 코드 재사용과 테스트를 하기 쉬울 때가 많습니다.

HOC 패턴을 사용하면 아래와 같이 컴포넌트의 트리가 깊어지는 경향이 있지만, Hook 을 사용한다면 컴포넌트를 래핑할 필요가 사라집니다.

<withAuth>
  <withLayout>
    <withLogging>
      <Component />
    </withLogging>
  </withLayout>
</withAuth>

HOC 의 사용 사례

• 전반적으로 동일하며 커스터마이징 불가능한 동작이 여러 컴포넌트에 필요한 경우
• 컴포넌트가 커스텀 로직 추가 없이 단독으로 동작할 수 있어야 하는 경우

Hook 의 사용 사례

• 공통 기능이 각 컴포넌트에서 쓰이기 전에 커스터마이징 되어야 하는 경우
• 공통 기능이 앱 전반적으로 쓰이는 것이 아닌 몇개의 컴포넌트에서 요구되는 경우
• 해당 기능이 기능을 쓰는 컴포넌트에게 여러 프로퍼티를 전달해야 하는 경우

장점과 단점은?

장점

• 한 곳에 구현한 로직들을 여러 컴포넌트에서 재사용할 수 있습니다.
• 동일 구현을 직접 구현하며 버그를 만들어 낼 확률을 줄일 수 있습니다.
• 로직을 한 곳에서 관리하여 관심사의 분리도 적용할 수 있습니다.

단점

• 반환하는 컴포넌트에 전달하는 props 의 이름이 겹칠 수 있습니다.
• 어떤 HOC 가 어떤 props 에 관련이 있는지 파악하기가 어려워 앱의 디버깅이나 규모를 키울 때 방해가 될 수 있습니다.