React HOC, HOF

HOC는 Higher Order Component이고 HOF는 Higher Order Function의 약어이다. 이 두개념은 클로저에서 확장된 개념이다.

HOC

HOC는 한국어로 하면 고차컴포넌트이다. HOC는 인자로 컴포넌트를 받아 새로운 컴포넌트를 반환한다. 컴포넌트로직을 재사용하기 위해서 사용한다.

const withHOC = WrappedComponent => {
  const newProps = {
    loading: false,
  };
  return props => {
    return <WrappedComponent {...props} {...newProps} />
  }
};

위 예제처럼 WrappedComponent를 인자로 받아 그 인자를 return부분에서 컴포넌트처럼 사용을 하고 있다.

HOF

HOF를 한국어로 하면 고차함수라고 한다. 인자에 하나 이상의 함수를 받는 것이다. 그리고 함수를 결과로 반환을 한다.

const twice = function(f, v) { 
  return f(f(v)); 
}; 

const plusOne = function(v) { 
  return v + 1; 
}; 

console.log(twice(plusOne, 1)); // 3