🔎 HOC(Higher Order Component)란 ?

기존 컴포넌트를 확장하여 기능을 추가하거나 변경하는 데 사용되는 React의 기능입니다.
React 초기 버전에서 HOC는 로직의 재사용을 위한 방법으로 인기가 있었지만,
최근에는 일반적으로 사용되지 않습니다.
최신 React 버전에서는 HOC의 대안으로 Hook 또는 다른 패턴의 사용을 권장하고 있습니다.

🔎 HOC의 단점

1. 복잡성 및 가독성
   HOC는 컴포넌트 간의 로직 재사용을 위해 사용되어지지만 deps가 깊어진다면
   컴포넌트의 복잡성이 증가하고 가독성이 떨어질 수 있습니다.
   복잡성의 증대와 가독성이 떨어진다면 자연스럽게 디버깅이 어려울 수 있겠습니다.
2. props의 충돌
   여러 HOC를 사용한다고 했을 때,
   상위의 컴포넌트와 그 하위의 컴포넌트간 props의 이름이 중복될 수 있습니다.
   이는 잠재적인 오류를 일으킬 수 있습니다.
3. 컴포넌트 컴포지션의 어려움
   HOC는 컴포넌트를 감싸는 래퍼 컴포넌트로 동작합니다.
   이는 컴포넌트 컴포지션(컴포넌트를 조합하여 더 큰 컴포넌트를 만드는 것)을
   어렵게 만들 수 있습니다.
   또한, HOC를 사용하는 컴포넌트를 추적하고 관리하기 어려울 수 있습니다.

🔎 HOC의 대안

1. React Hooks
   Hooks를 활용하면 컴포넌트 내에서 로직을 추출하고 재사용할 수 있습니다.
   HOC를 사용하여 로직을 재사용하는 것 보다 가독성과 유지보수성을 향상시킵니다.
2. Render Props
   Render Props패턴은 로직의 재사용을 위해 상위 컴포넌트에서 하위 컴포넌트로
   재사용할 함수를 props를 전달하여 재사용하는 방법을 의미합니다.
   이러한 방식은 컴포넌트 간의 컴포지션을 쉽게 구현할 수 있고,
   로직 재사용성을 높일 수 있습니다.
3. 컴포넌트 컴포지션
   작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 만드는 패턴을 의미합니다.
   해당 패턴으로 로직을 재사용한다면 컴포넌트 간의 결합도를 낮출 수 있습니다.

🔎 정리

HOC는 복잡성, 가독성, 재사용성의 측면에서 어려움이 있기 때문에 사용이 줄어들었으며
HOC에 대한 대안으로는 Hooks, Render Props 패턴, 그리고 컴포넌트 컴포지션을 통해 이러한 문제를 극복할 수 있다.