higherOrderComponent의 약자
함수를 뜻한다.
컴포넌트를 받아서 새로운 컴포넌트를 리턴하는 함수이다.
psuedo code는 다음과 같다.
const HOC = ReactComponent => EnhancedReactComponent;
HOC는 이런 경우에 주로 쓰인다.
Container 컴포넌트와 Presentational 컴포넌트 분리: 비지니스 로직을 담당하는 컴포넌트(Container 컴포넌트)와 디스플레이를 담당하는 컴포넌트(Presentational 컴포넌트)를 분리하여 사용 할 때, 컨테이너 컴포넌트를 HOC를 만들어서 사용 할 수 있다.
로딩 중 화면 표시: 보통 SPA(Single Page App)에서 화면이 로딩 중일 때, Skeleton 화면을 보여주고, 로딩이 완료되면 데이터를 보여줄 때 사용 할 수 있다.
유저 인증 로직 처리: 컴포넌트 내에서 권한 체크나 로그인 상태를 체크하기 보다는 인증 로직을 HOC로 분리하면 컴포넌트 재사용성도 높일 수 있고, 컴포넌트에서 역할 분리도 쉽게 할 수 있다.
에러 메세지 표시: 컴포넌트 내에서 분기문(if/else 등)을 통해 처리 할 수도 있지만, 분기문을 HOC로 만들어 처리 하면 컴포넌트를 더욱 깔끔하게 사용 할 수 있다.
당연히 이 외에도 다양한 방법으로 HOC를 활용 할 수 있겠지만 여기선 이정도만 다뤄보자.
출처:
https://www.vobour.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-react-%EC%9D%B4%ED%95%B4-4-higher-order-component
