Learn React Currying

Currying?

React에서의 커링(Currying)은 함수형 프로그래밍 기법 중 하나로, 여러 개의 인자를 가지는 함수를 더 작은 단위의 함수로 분리하여, 인자를 하나씩 적용해 나가면서 원래 함수의 결과를 얻는 기법이다.

커링 사용의 장점

커링을 사용하면, 인자를 더 적게 받는 함수를 만들어내는 것이 가능해져서, 함수의 재사용 성이 높아지며 코드의 가독성도 향상된다.
또한, 함수형 프로그래밍의 불변성(immutability)과 부수 효과(side effect)를 적극 활용할 수 있어서, 코드의 안정성과 유지보수성을 향상시킬 수 있다.

예시

function add(x, y) {
  return x + y;
}

위와 같은 함수가 있을 때, 이 함수를 커링을 이용해 두 개의 인자를 받는 함수로 바꿀 수 있다.

function add(x) {
  return function(y) {
    return x + y;
  }
}

이렇게 커링된 함수는 첫 번째 인자 x를 받은 후, 두 번째 인자 y를 받는 함수를 반환하고 이후 반환된 함수는 y를 받아 x와 y를 더한 값을 반환하는 구조이다.

React에서는 커링을 사용하여 인자를 더 적게 받는 함수를 만들어내는 것이 일반적인데
예를 들어, 다음과 같은 함수가 있다고 가정해보자

예시 2

function updatePerson(name, address, age, job) {
  // ...
}

이 함수는 많은 인자를 받아 처리해야 한다, 따라서 커링을 사용해 보면

function updatePerson(name) {
  return function(address) {
    return function(age) {
      return function(job) {
        // ...
      }
    }
  }
}

이렇게 작성된 함수는 첫 번째 인자로 name을 받은 후, 두 번째 인자로 address를 받는 함수를 반환한다. 그리고 이 반환된 함수는 다시 세 번째 인자로 age를 받는 함수를 반환하며, 마지막으로 네 번째 인자로 job을 받아 처리하는 구조이다.