React: HOC (Higher Order Component)

HOC (Higher Order Component)


고차 컴포넌트 – React

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

HOC는 컴포넌트 로직을 재사용하기 위한 React의 기술이다. 컴포넌트를 가져와서 개로운 컴포넌트로 반환하는 함수이다.
HOC는 입력된 컴포넌트를 수정하지 않으며 상속을 사용하여 복사하지도 않는다. 원본 컴포넌트를 컨테이너 컴포넌트로 포장하여 조합한다. 즉, 사이드 이펙트가 없는 순수 함수이다!
훅(hook)으로 인해 hoc의 사용량이 줄어들어 중요도가 다소 낮아졌다.

주의사항

  • render 메소드 안에서는 HOC를 사용하면 안된다.
  • 정적 메소드는 따로 복사해야 한다.
  • ref는 전달되지 않는다.

Comments