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

recompose라이브러리

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

recompose는 반복해서 입력해야하는 불필요한 코드의 양을 줄여야 하는 경우에만 적절히 최소한으로 사용하도록 한다.

 

라이브러리를 설치하기 위해 명령 프롬프트에 다음의 명령어를 입력한다.

$ yarn add recompose

 

라이브러리를 import할 때는 필요한 함수만 추출하여 임포트한다.

ex) import branch from 'recompose/branch';

 

recompose라이브러리의 함수 종류

branch()함수

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

branch(
    condition: props => boolean,
    left: HigerOrderComponent,
    [right: HigerOrderComponent] //생략가능
)(WrappedComponent)

condition에 출력 조건을 정의한 함수가, left

 

withState()함수

함수형 컴포넌트를 클래스형 컴포넌트로 변환하지 않아도 state를 사용할 수 있게 해준다.

this.state나 this.setState를 사용하지 않고도 state를 변경할 수 있다.

withState(
    stateName: String.
    stateUpdater: string,
    initialState: any,
)(WrappedComponent)

stateName - 전달할 프로퍼티 내용

stateUpdater - state를 변경할 수 있는 콜백 함수 프로퍼티 이름

initialState - state 초깃값

 

lifecycle()함수 (lifecycle 이해 필요)

함수형 컴포넌트에서 사용시 우회적으로 생명주기 함수를 추가할 수 있고,

클래스형 컴포넌트에서 사용시 생명주기 함수에서 사용할 반복코드를 lifecycle()함수로 묶어 재사용할 수 있다.

lifecycle({
    [lifeCycleMethod: string]: function,
    state: object,
})(WrappedComponent)

lifeCycleMethod - 생명주기 함수 이름

state - state 초깃값