HOC ( High Order Component )
HOC의 중요도가 높았지만 현재는 낮아지고 있고 리액트내에서는 대체할 수 있는 Hook이 나왔다고 합니다.
리액트에서 컴포넌트 안에 있는 로직을 다시 재활용 할 수 있는 어드밴스드한 기술이라고 정의되어 있습니다
리액트 API와는 상관이 없고 리액트로 만들어진 컴포넌트를 그냥 사용할 뿐이지 HOC 개념은 리액트에서만 국한된 내용은 아닙니다~ 어떤 패턴을 의미하는데 리액트의 컴포넌트를 재활용하거나 상속받거나 하는게 아니라 조합방식으로 하는 패턴입니다
컴포넌트 기준으로 봤을때 함수 컴포넌트는 props를 인자로 받고 그 모습을 props에 의존적으로 보여줍니다 UI에 드러나는거죠!
하지만,
HOC는 props 대신에 컴포넌트를 인자로 받고 새로운 컴포넌트를 리턴하는 역할을 합니다.
재활용되는 로직이 추가된 컴포넌트를 받는다는 뜻입니다.
위와같이 라이브러리에서 많이 사용을 합니다.
보통 with가 붙은 함수가 HOC인 경우가 많습니다 (ex. withRouter())
사용하는법
주의할 점
HOC 패턴은 어떤 방법을 통해 공통된 로직을 관리하고 있을까요?
사실 HOC는 함수를 인자로 받아 함수를 리턴하는 함수인 고차함수(HOF, higher-order function)로부터 온 것입니다.
HOC라는 이름 역시 여기에서부터 유래된 것이죠.
마찬가지로,
HOC는 컴포넌트를 인수로 받아 컴포넌트를 리턴하는 함수를 의미합니다.
HOF(Higher-Order-Function)
HOF는 하나 이상의 함수를 인자로 받고 HOF를 사용하게 되면 유연하고 반복적인 코드를 줄일 수 있습니다.
자바스크립트에서 함수형 프로그래밍을 가능케하는 굉장히 특별한 함수이며 특히나 값을 나중에 평가한다는 점에서 매우 활용도가 높다고 할 수 있습니다.
const a = function(fn) {
return function (...args) {
return fn(...args);
};
};
const b = function(a,b) {
return a+b;
};
const c = a(b);
c(1,2);
/* print 3 */
a(b)(1,2);
/* print 3 */
출처: https://24hours-beginner.tistory.com/250 [365일 24시간 초보:티스토리]