High Order Component
Component logic 을 재사용 하기 위함이다.
컴포넌트를 인자로 받아 새로운 컴포너트를 리턴하는 함수이다.
일반적인 component 의 흐름은
props => 컴포넌트 => render UI
HOC 의 흐름은
컴포넌트 => HOC => 새로운 컴포넌트
이전에 withRouter 를 사용한 적이 있다. 이 또한 HOC 의 일종이다.
횡단 관심사
여러 페이지에서 비슷한 흐름의 작업을 처리한다.
예를 들면, 로그인 여부를 판단해서 로그인 되어있다면 보여주고, 되어있지 않다면 보여주지 않는
처리는 여러 페이지에서 그 흐름이 거의 동일하다.
주의할 점
render 함수 안에서 HOC 사용하지 말라. 매번 새롭게 render 된다.
static 함수는 반드시 새롭게 카피 되어야 한다.
Refs 는 패스되지 않는다. (React.forwardRef)
static 함수를 복사해 주는 라이브러리가 있다.
'hoist-non-react-statics'