[React] Higher Order Component

React에서 HOC라고 불리는 Higher Order Component의 개념에 대해서 알아보자.
한국 말로는 고착 컴포넌트라고도 불린다.

• Higher Order Component는 Hook이 나오기 이전 React v.16에선 매우 중요한 개념으로 자리 잡았다.
• HOC와 비슷한 역할을 하는 Hook의 등장으로 중요도가 예전만큼은 아니게 되었다.

---

HOC란?

• advanced technique in React forreusingcomponent logic.
• 컴포넌트 로직을 재 활용 할 수 있는 고급 기술
• not part of the React API
• 리액트 API랑은 전혀 관련이 없다
• a pattern that emerges from React’s compositional nature.
• 리액트의 컴포넌트를 상속받거나 재활용하는 방식이 아니라 조합하는 방식으로 야기된 패턴이라는 것을 설명하고 있다.

HOC = function(컴포넌트) { return 새로운 컴포넌트; }

 

• HOC는 <컴포넌트>를 인자로 받아서 <새로운 컴포넌트>를 리턴 하는 함수이다.

• 기존의 function component는 props를 인자로 받아 렌더 함수를 통하여 UI를 리턴했다.
• HOC는 컴포넌트를 인자로 받아 재활용 로직이 적용된 HOC 코드를 거치면 새로운 컴포넌트를 리턴한다.

---

HOC를 사용하는 방법

• Use HOCs For Cross-Cutting Concerns
• 크로스 커팅 관심사엔 HOC를 사용하라
  • ex1) 로그인이 되었는지 확인하는 것
  • ex2) 인증을 확인 한 후에 API를 호출한다
• Don’t Mutate the Original Component. Use Composition.
• HOC의 인자로 들어가는 컴포넌트를 변경하지 마라. 상속 대신 React Component의 Compositional한 Nature를 사용하라.
• Pass Unrelated Props Through to the Wrapped Component
• HOC 로직과 관련되지 않은 props는 감싸진 컴포넌트에 주입될 수 있도록 해야 한다.
• Maximizing Composability
• 구성품 안에 조합처럼 넣는 행동(Composability)을 최대화 시켜라.
• Wrap the Display Name for Easy Debugging
• 쉬운 디버깅을 위해서 새로 들어간 컴포넌트에 HOC를 사용했다는 것을 표시해줘라.

---

HOC 사용시 주의할 점

• HOC를 render Method안에 사용하면 안된다.
• Static method는 복사하여 넣어야 한다.
• 레퍼런스는 통과(pass through) 하면 안된다.

 

Redux나 Relay를 이해하기위해 꼭 필요한 개념이다.