React Currying

1. Currying(커링) 기법

커링 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다.
이를 이해하기 위해서는 HOC, HOF가 뭔지 알고 있어야한다.
HOC, HOF에 관한 글

다음 코드를 보자

function helloFunc(word, name) {
    console.log(`${word}, ${name}`);
}

word와 name이라는 두 개의 인자를 받아 출력하는 함수이다.

이 함수에 커링을 적용해보자.

function helloFunc(word) {
    return function (name) {
        console.log(`${word}, ${name}`);
    };
}

const printHello = helloFunc("안녕"); 
printHello("멍멍이");  // 안녕, 멍멍이
printHello("야옹이");  // 안녕, 야옹이

2개의 인자를 받던 함수가
1개의 인자를 받는 함수 2개로 쪼개진 것을 볼 수 있다.

또한 첫 번째 인자 word를 "안녕"라는 값으로 고정하고,
name만 인자로 받으며 사용하는 것을 볼 수있다.

이와 같이 커링 기법은 일부 인자에 같은 값을 반복적으로 사용할 때
그 값을 고정함으로써 중복을 최소화 하는 기법이다.

좀 더 심화된 예제를 보자.

function helloFunc(word, name, word2, name2) {
    console.log(`${word}, ${name} || ${word2}, ${name2}`);
}

위 함수는 4개의 인자를 받는다.
여기에 커링을 적용해 보자.

function helloFunc(word) {
    return function (name) {
        return function(word2){
            return function(name2){
                console.log(`${word}, ${name} || ${word2}, ${name2}`)
            }
        }
    };
}

const printHello = helloFunc("안녕")("댕댕이")("좋은 아침!");
printHello("잘가"); // 안녕, 댕댕이 || 좋은 아침!, 잘가 출력
printHello("놀자");   // 안녕, 댕댕이 || 좋은 아침!, 놀자 출력

다음과 같이 화살표 함수를 사용하면 가독성을 좀 더 높일 수 있다.

const helloFunc = (word) => (name) => (word2) => (name2) => {
    console.log(`${word}, ${name} || ${word2}, ${name2}`);
};

const printHello = helloFunc("안녕")("댕댕이")("좋은 아침!");
printHello("잘가"); // 안녕, 댕댕이 || 좋은 아침!, 잘가 출력
printHello("놀자");   // 안녕, 댕댕이 || 좋은 아침!, 놀자 출력

커링 기법을 적용 할 때는 인자의 순서가 매우 중요하다.
상단에 위치한 인자부터 고정하는 방식이라
반복적으로 사용하는 빈도가 높은 값 일수록 상단에,
낮은 값 일수록 하단에 인자를 배치해야 한다.