하이어오더 컴포넌트

하이어오더 컴포넌트

커링(curing)

커링은 반환값이 함수인 디자인 패턴이며, 중복된 코드를 반복적으로
입력하지않고 원하는 기능을 조합하여 사용할수있다는 장점이있다.
커링은 함수의 재활용 때문에 사용한다.

ex) 커링의 ex)
function multiply(a, b){
     return a * b;
 }

function multiplyX(x){
     return function(a){
         return multiply(a, x);
     }
// 위와 같은 예시
const multiplyX = x => a => multiply(a, x);

커링은 인자를 나눠 받아서 사용할수있다는 점에 주의해야한다.

const equation = (a, b, c) => x => ((x * a) * b) + c;
const formula = equation(2, 3, 4);
const x = 10;
const result = formula(x);

compose()

커링을 그냥 조합하게된다면 일반적으로 우리가 생각하는 왼쪽에서 오른쪽이 아닌
오른쪽에서 왼쪽으로 진행방향이 되게된다

     함수가 실행되는 순서<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<-------
const formula = x => addFour(multiplyThree(multiplyTwo(x)))

따라서 compose()라는 함수를 사용하게된다면 왼쪽에서 오른쪽으로
진행방향이되어 우리가 헷갈리지않게 해준다.

function compose(funcArr){
    return funcArry.reduce(
        function(prevFunc, nextFunc){
            return function(value){
                return newFunc(prevFun(value));
            }
        },
        function(k) { return k;}
    )
}

const formulaWithCompose = compose([multiplyTwo, multiplyThree, addFour]);

하이어오더 컴포넌트

하이어오더 컴포넌트는 디자인패턴인 데코레이터 패턴을 적용하여서 개념을 사용하게 되는데,
상속구조에서는 몇가지의 문제가 생긴다

1. 원치않는 상속
2. 상속구조들의 변화
3. 상속구조가 깊어질수록 파악하기 어려움

클래스간의 종속성 없이 기능만을 공유하는 데코레이터 패턴을 사용하면 이러한
단점을 커버할수있는데
이러한기능은 java에서는 interface, javascript 에서는 curing으로 나타낸다.

하이어오더 컴포넌트의 특징

하이어 오더 컴포넌트는 기존 컴포넌트에 기능을 덧입혀 새 컴포넌트로 반환 하는 함수를 의미한다

1. 하이어오더 컴포넌트는 기존 컴포넌트에 연결된 프로퍼티를 모두 전달해줘야한다.
   전개표현식(...)을 사용하면 간단하게 사용할수있다.
2. 하이어오어 컴포넌트와 확장 컴포넌트의 이름은 with으로 시작한다
   암묵적인 naming rule을 with을 붙이기로 했다고한다.
3. 하이어오더 컴포넌트를 만들때는 암묵적인 '컴포넌트 인자하나만 전달한다'라는 규칙

//withLoading.jsx
import React from 'react';

export default (loadingMessage = '로딩중') => WrappedComponent => {
  const { displayName, name: componentName } = WrappedComponent;
  const wrappedComponentName = displayName || componentName;

  function WithLoading({ isLoading, ...props }) {
    if (isLoading) {
      return loadingMessage;
    }

    return <WrappedComponent {...props} />;
  }
  WithLoading.displayName = `withLoading(${wrappedComponentName})`;
  return WithLoading;
};

하이어오더 컴포넌트 라이브러리

recompose

하이어오더 컴포넌트 중 자주 사용하는 패턴을 모든 하이어오더 컴포넌트 라이브러리

branch()

조건식에 따라 다른 하이어오더 컴포넌트를 출력해야하는 경우 사용.

branch(
 condition : props => boolean, //출력 조건
 left : HigherOrderComponent, //출력 조건이 참일때
 [right: HigherOrderComponent] //출력 조건이 거짓일때(생략가능, 생략시 WrappedComponent를 나타낸다)
)(WrappedComponent)

withState()

함수형 컴포넌트는 State를 사용할수없지만, 프로퍼티와 콜백함수를 활용해 우회적으로 사용할수있다. withState를 사용하여서 state를 사용할수있게 한다.

withState(
	stateName : string, //프로퍼티 이름
    stateUpdater : string, //state를 변경할수있는 callback 함수 이름
    initialState : any, // state의 초기값
)(WrappedComponent)

lifecycle()

함수형 컴포넌트에서 생명주기를 사용하고싶을때 사용하는 함수

lifecycle({
	[lifeCycleMethod: string]: function, //생명주기 함수 이름
    state: object // state 초기값 입력
})(WrappedComponent)