[React] 커링함수와 함수 조합 기법

커링이란?

반환값이 함수인 디자인 패턴으로

중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 알맞게 사용할 수 있다.

 

사용 예시)

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

equation함수는 a,b,c 값을 인자로 받아 ((x * a) * b) + c 라는 함수를 반환한다.

이와 같이 인자를 나중에 받아 실행할 함수를 생성해주는 equation() 함수와 같은 함수를 커링함수라고 한다.

 

 

함수조합기법

함수의 적용 순서와 작성 순서의 흐름이 달라서 코드의 가독성이 떨어지고 작성 시에 실수를 할 수 있다.

compose()함수를 사용하면 이러한 실수를 하지 않을 수 있다.

 

compose()함수

: 커링함수를 순서대로 조합하는 함수로 reduce()함수를 사용하여 구현한 함수

  * reduce()함수 - 배열을 줄여가며 배열의 각 요소에 대해 callback을 실행하며 단 1개의 출력 결과를 만드는 함수

 

사용예시)

사용할 함수의 구조이다.

[multiplyTwo,multiplyThree, addFour].reduce(<func>, function(k) {return k;});

 

<func> 부분의 구성은 다음과 같다.

[multiplyTwo, multiplyThree, addFour].reduce(
	function(prevFunc, nextFunc){
    	return function(value){
			return nextFunc(value));
        }
    },
    function(k) {return k:}
);

위의 reduce()함수의 실행과정을 설명해보자 

1단계 : 초깃값과 multiplyTwo()함수의 조합

prevFunc - function(k) { return k;}

nextFunc - multiplyTwo

 

2단계 : 1단계 결과값과 multiplyThree()함수의 조합

prevFunc - 1단계에서 얻은 함수

nextFunc - multiplyThree

 

3단계 : 2단계 결과값과 addFour()함수의 조합 

prevFunc - 2단계에서 얻은 함수

nextFunc - addFour

 

3단계까지 마치면 아래의 조합 결과를 얻을 수 있다.

function(value) {
  return addFour(
    function(value) {
      return multiplyThree(
        function(value) {
          return multiplyTwo(
          (k => k)(value)
          );
        }(value)
      );
    }(value)
  );
};

배열 안에 지정된 함수만 조합하는 코드를 임의의 함수로 조합할 수 있도록 하기 위해서는 아래와 같이 reduce()를 반환하는 함수를 정의하고 함수의 인자로 조합할 함수의 배열을 전달하면 된다.

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

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

 

실무에서 사용하는 함수 조합 기법