📖HOC

1. HOC

👉 고차 컴포넌트(HOC) 개념은 고차 함수(HOF)와 유사하다.

고차(高次)
고차 의미는 "상위 차원(수준)"이다. 의미는 "생각이나 행동 따위의 수준이나 정도가 높은 것"을 말하며, 수학에서는 "높은 차수(3차 이상)"를 뜻한다.

2. HOF

👉 "고차 함수(HOF)" 조건의 다음과 같다. 함수형 프로그래밍에서 함수는 값(value)으로 취급된다. 즉, 함수에 숫자, 문자 데이터 전달 하듯 함수 또한 다른 함수에 값으로 전달할 수 있다. 마찬가지로 함수를 값으로 반환하는것도 가능하다.

• 하나 이상의 함수를 인자로 전달 받는다. (fn) => {})
• 함수를 결과로 반환 한다. (() => fn)

✍ Exmple (함수 전달 → 연산 → 함수 반환)

// 고차 함수
const twice = (fn, v) => fn( fn(v) )

// 일반 함수
const f = v => v + 9

// 고차 함수 실행
console.log( twice(f, 6) ); // 24 ← (6 + 9) + 9

👉 React 프로그래밍(리스트 렌더링)에서 자주 사용되는 Array의 map() 메서드는 '고차 함수'이다. 아래 코드는 숫자 리스트를 전달 받아 숫자 리스트를 반환한다.

✍ Exmple (Array - map())

const numbers = [3, 6, 9];

const otherNumbers = numbers.map(number => (number * 2) / 3);

console.log(otherNumbers); // [2, 4, 6]

2. HOC

👉 고차 컴포넌트는 컴포넌트 로직을 재사용 하기 위한 React 고급 프로그래밍 기술이다. HOC는 React API는 아니지만, React 프로그래밍에서 자주 활용된다. 고차 함수를 한마디로 정의하면 "컴포넌트를 전달 받아 새로운 컴포넌트를 반환하는 함수" 이다.

✍ Exmple

const EnhancedComponent = higherOrderComponent(WrappedComponent)

// higherOrderComponent → 고차 컴포넌트
// WrappedComponent     → 일반 컴포넌트
// EnhancedComponent    → 고차 컴포넌트가 반환한 향상된 컴포넌트

일반 컴포넌트가 UI(React 요소)를 반환하지만, 고차 컴포넌트는 컴포넌트를 반환한다. HOC는 Redux connect 함수, React Router withRouter 함수, Relay createFragmentContainer 함수 등 다양한 React 라이브러리에서 일반적으로 사용된다.
✍ Exmple

export default withRouter(connect(mapStateProps, mapDispatchProps)(Counter))
// withRouter → 고차 컴포넌트
// connect → 고차 컴포넌트
// Counter → 일반 컴포넌트

3. 사용자 정의 고차 컴포넌트

👉 아래의 내용은 실용적인 예제는 보다 이해하기 위함에 더 가깝다.

✍ Exmple

// 사용자 정의 HOC 모듈
import { withComponent, withComponentProps } from './withComponent';

// 일반 컴포넌트
import Hello from './Hello';

// 고차 컴포넌트
// - Hello 컴포넌트를 래핑하는 고차 컴포넌트 → 컴포넌트 반환
const WrapHello = withComponent(Hello);

// 고차 컴포넌트를 래핑하는 함수
// - 옵션(props) 객체 전달 함수 실행 → Hello 컴포넌트를 래핑하는 고차 컴포넌트 → 컴포넌트 반환
const WrapHelloProps = withComponentProps(
  /* 옵션(props) 설정 */
  {
    message: 'withComponent HOC를 래핑한 함수를 활용해 생성한 컴포넌트',
    styles: {
      color: '#06f',
      fontWeight: 100,
      fontSize: '1.4rem',
    },
  }
)(Hello) ;// ← Hello 컴포넌트 전달