React - middleware와 HoC

middleware의 구조

currying 기법을 사용한다.

const middleware = (store) => (next) => (action) => {
  console.log(action) // 다른 작업들을 여기에서 실행할 수 있도록
  
	next(action);
};

다음에 설명하는 Higher-Order Component도 currying 기법을 사용한다.

Higher-Order Component

Concretely, a higher-order component is a function that takes a component and returns a new component.
Higher-Order Components – React

HoC는 기존 컴포넌트를 사용하여 새로운 컴포넌트를 만드는 함수이다.

예시 1

const hoc = (Component) => () => {
  console.log("I'm hoc"); // 기록용 console.log 추가
  return (
    <Component hello="I'm hoc" />
    // 기존 Component 컴포넌트를 HoC에서 수정하여 새로운 컴포넌트로 반환한다
    )
};

hoc(Component);

예시 2

const connect = (mapStateToProps) => (Component) => () => {
  console.log("I'm hoc");
  return (
    <Component props={mapStateToProps} />
    // 기존 Component props를 추가
    )
};

connect(mapStateToProps)(Component);