고차 컴포넌트(HOC, Higher Order Component)

https://ko.reactjs.org/docs/higher-order-components.html 를 읽고 정리한 글입니다

 

• 고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 & 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수
  • props를 UI로 변환하지 않고, React에서 코드 재사용의 기본 단위인 컴포넌트를 새로운 컴포넌트로 변환
• 원본 컴포넌트를 컨테이너 컴포넌트로 포장(Wrapping)하여 조합(compose) ⇒ 사이드 이펙트 없는 순수 함수
• 내부에서 컴포넌트의 프로토타입을 수정하지 않음
• 컴포넌트에 기능을 추가
• 네이밍 : withSubscription처럼 HOC 이름으로 내부 컴포넌트명 감싸기
• 주의점
  • rende() 안에서 사용하지 말 것 → 컴포넌트 정의 밖에서 적용하여 컴포넌트가 한 번만 생성하게 할 것
  • 정적 메서드는 따로 복사
  • ref는 전달되지 않는다 → React.forwardRef API 사용