High Order Component 란 리액트에서 컴포넌트를 재사용하는 고급 기술로써 일종의 컴포지션 패턴이다.

컴포넌트를 입력으로 받아서 새로운 컴포넌트를 리턴하는 펑션이다.

앞서의 composition은 단순히 UI만 컴포지션 하였다. 그러나 리액트는 state라는 상태 모델 정보도 존재하는데 state를 컴포지션 하지는 못한다. 리액트에서 state를 합치는 기술은 HoC, Render Props 정도의 기술이 존재한다.

이것은 Cross Cutting Concerns 기술로써, 다른 프레임워크와 비교를 하자면 스프링 프레임워크의 AOP (Aspect Of Perspective) 같은 관점 지향 프로그래밍, 그리고 Vue 에서는 mixins 라는 동일한 개념이 존재한다.

예를 들어, 100개의 컴포넌트가 존재한다고 가정한다면 모든 컴포넌트에 mount 시에 로그를 찍고 싶다면 어떻게 해야 할까? 컴포넌트를 상속과 같은 종속 관계가 아니라 횡단하는 기술이 필요하며 이때 사용되는 기법이다.

Q) Button 컴포넌트와 Label 컴포넌트가 있다. 이 두 컴포넌트에 카운트를 1씩 증가시키는 기능을 추가하고 싶다. 1씩 증가하는 HoC 컴포넌트는 이미 만들어져 있다. Button의 기능에 클릭시 1을 증가시키는 HoC 컴포넌트를 만들고, Label은 마우스 out 시 1씩 증가시키는 HoC 컴포넌트를 각각 만드시오.

A: HoC 컴포넌트는 컴포넌트를 입력으로 받아서 새로운 기능을 추가한 컴포넌트를 리턴하는 펑션이다. 펑션에 Button을 입력으로 넣어서 HoC를 만든다.

CodePen

See the Pen react HOC example by LeeDongKee (@eastflag) on CodePen.default