[React] React에서 재사용성을 높여보자.

1. 커링 함수 구현하기

커링(Currying)은 함수의 재사용성을 높이기 위하여 함수 자체를 return하는 함수이다. 함수를 하나만 사용할 때에는 필요한 모든 파라미터를 한번에 넣어야 하지만, 커링을 사용하게 되면, 함수를 분리할 수 있으므로 파라미터도 나누어서 전달할 수 있다!

import React from 'react';

class R074_ReactCurrying extends Component {
    
    plusNumOrString(c, d){
        return c + d;
    }

    PlusFunc1(a){
        return function(b){
            return this.plusNumOrString(a,b)
        }.bind(this)
    }

    PlusFunc2 = a => b => this.plusNumOrString(a,b)

    PlusFunc(a){
        return this.PlusFunc1(a)(200)
    }

    render(){
        return (
            <>
                <input type = "button" value = "NumberPlus"
                onClick = { e => alert(this.PlusFunc(100))}/>
                <input type = "button" value = "StringPlus"
                onClick = { e => alert(this.PlusFunc("react"))}/>
            </>
        )
    }
};

export default R074_ReactCurrying;

plusNumOrString함수는 파라미터로 받은 값을 c+d로 반환한다.
여기서 PlusFunc1 함수는 this.plusNumOrString(a,b)를 return하는 또다른 함수를 return한다.

PlusFun2함수는 PlusFunc1함수를 화살표 함수로 간단하게 표현한 것이다. 완전 동일한 것임!
이런 함수 형태가 동일하다는 것 참고로 알아두자(역시 간편한 화살표 함수..)

PlusFunc1(a){
        return function(b){
            return this.plusNumOrString(a,b)
        }.bind(this)
    }

PlusFunc2 = a => b => this.plusNumOrString(a,b)

PlusFunc 함수는 파라미터를 한개만 받는데, PlusFunc1함수를 호출할 때 변수 a와 상수 200을 파라미터로 함께 전달한다.

버튼을 누르게 되면 이 PlusFunc를 호출하면서 숫자 100과 문자열 react를 전달하게 되는데, 고정으로 더해주게 되는 숫자 200은 파라미터로 계속 넣어주기 때문에 PlusFunc을 호출할때 200을 따로 또 안넣어도 되는 것이다.

커링과 같이 함수 자체를 인자로 받거나, 반환하는 함수를 고차 함수라고 한다.

2. 하이오더 컴포넌트 구현

컴포넌트를 인자로 받거나, 반환하는 고차 컴포넌트를 만들 수 있다.