HOC (Higher-order Component)

• 컴포넌트의 반복되는 코드나, 기능을 제공하는 함수이다.

• 컴포넌트를 받아서, 새로운 컴포넌트를 return해 주는 함수이다.

• 주로 with~로 이름을 짓는다.

• 파라미터로 컴포넌트(A)를 받아와서, 함수 내부에서 새로운 컴포넌트(B)를 만들고, 새로운 컴포넌트(B)안에 파라미터로 받아온 컴포넌트(A)를 렌더링한다.

• HOC는 input Component를 수정하지 않는다. (HOC는 순수한 함수)
• And that’s it! The wrapped component receives all the props of the container, along with a new prop, data, which it uses to render its output

2. original component를 변형하지말고, composition을 사용해라

• HOC 에서 originalcomponent를 변경하게되면 다음과 같이 변경되면, 이후에 다른 HOC를 적용하고, 그 HOC에서 componentWillREceiveProps를 변경하게되면 첫번째 HOC에서 적용되었던게 오버라이드된다.

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  // The fact that we're returning the original input is a hint that it has
  // been mutated.
  return InputComponent;
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent);

• 따라서 HOC에서는 input component를 wrapping해서 사용하여야한다.

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

• Container components 처럼 ui를 렌더하는 것이아니라, 기능을 수행, 구현하고 props를 통해서 하위 컴포넌트에 넘겨준다.
• You can think of HOCs as parameterized container component definitions.

3. convention : pass unrelated props through to the wrapped component

4. convention : Maximizing composability

• HOC는 모두 똑같은 형태가 아니다.

1. wrapped component하나만 인자로 받을 떄

const NavbarWithRouter = withRouter(Navbar);

compose 함수

https://redux.js.org/api/compose

compose(function1, function2, more);

• 오른쪽에서 왼쪽으로 (from right to left) 함수를 구성하고, 그렇게 구성된 함수를 return 한다.
• 오른쪽함수(function2)에서 리턴되는 value는 왼쪽 함수(function1)의 argument로 들어간다.
• 각 함수는 single parameter을 받는다.
• 예외 : 맨 오른쪽의 함수(function2)는 multiple parameters를 받을 수 있다. (왜냐하면, 맨 오른쪽함수는 왼쪽에 있는 함수에 return값을 보내기만 하면되기 때문이다.)
• return값 : 오른쪽에서 왼쪽으로 조합되면서 구성된 함수

코드 속 compose

• EditProfile.jsx

export default compose(
  withPageType(() => PAGE_TYPE.EDIT_PROFILE),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(EditProfile);

Higher order functions

https://developer.ibm.com/node/2016/01/11/higher-order-functions-in-es6easy-as-a-b-c/

• 둘중 하나만 막족하면 higher order functions이다

1. 하나이상의 function을 argument로써 받는다.
2. 결과로 function을 리턴한다.

function add(x){
  return function(y){
    return y + x;
  };
}

var addTwo = add(2);
addTwo(3);          // => 5
add(10)(11);        // => 21

const add = x => y => y + x;
//outer function: x => [inner function, users x]
//inner function: y => y + x;

• 왜씀?
  • 반복되는 코드를 줄일 수 있다.
  • 코드의 쉬운 재사용을 허락한다.
  • It increases clarity of code meaning

var error = function(prefix) {
  return function fn(message) {
    console.error(prefix + message);
  };
};

• Higher-order function is a function accepting one or more function parameters as input, or returning a function as output.

connect 함수

• Returns A higher-order React component class that passes state and action creators into your component derived from the supplied arguments. This is created by connectAdvanced, and details of this higher-order component are covered there.
• https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options