Currying 이란 여러개의 인자를 받는 함수를 단일 인자를 받는 함수의 체인을 이용하는 방식으로 바꾸는 것을 의미한다.

참조: https://seungdols.tistory.com/750

각설하고 예를 들어본다면

ex)

const sum = function(x) {
  return function(y) {
    return x + y;
  }
}
console.log(sum(2)(5)); // 7

위에서 볼 수 있듯이 단자를 받는 함수들을 연결시킨다.
하지만 인자의 수가 많으면 많아질수록 반환해야하는 함수의 수도 많아질것이다.

아래그림은 콜백 지옥을 그림으로 나타낸 밈이다..

How?

function aaa(a, b) {
	console.log( a + " " + b )	
}

aaa("hello", "world!")  // hello world

위의 함수는 a 와 b를 인자로받아 출력해주는 함수이다. 이함수에 커링을 적용해보자.

function aaa(a) {
	return function bbb (b) {
    	console.log( a + " " + b )	
    }
}

const ccc = aaa("hello")
ccc("world!")  // hello world

이처럼 여러개의 인자를 받는 함수를 2개로 쪼개서 사용하는 것을 볼 수 있다.

예시를 들어보면,

export default function() {
	
  const onClickGetId = (event) => {
  	console.log(event.target.id)
  }
  
  return (
  	<div onClick={onClickGetId} id="any">클릭시 아이디를 가져옴</div>
  )
  
}

위의 함수는 특정 태그에 아이디를 주고 그아이디를 받아오는 경우이다.

하지만 코드의 규모가 커질수록 중복된 아이디 값을 가져올 가능성이 농후하기 때문에 아래와 같은 방법으로 해결하곤한다.

export default function () {
  
  const onChangeGetIdValue = (id) => (event) => {
    
    console.log(id, event.target.value);
    
  };

  const getId = onClickGetId("any");

  return <input onChange={getId} type="text" />;
}