Currying

• Currying은 여러개의 인자(argument)를 받는 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법이다.
• 인자(argument)가 여러개인 함수를 여러개로 분리하여 사용할 수 있다.

Currying 사용법

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개로 쪼개서 사용하는 걸 볼 수 있다.
위에서 얘기햇던 것처럼 일부 인자를 고정시키는 새로운 함수를 만드는 것.
즉 aaa(a) 람수 인자에 "hello"라는 값을 고정으로 하고 뒤에 ccc()함수에 인자만 변경하면서 사용 가능하다.

화살표 함수를 사용하면 코드의 길이를 조금 더 생략이 가능하다.

const aaa = (a) => (b) => {
    	console.log( a + " " + b )	
    }
}

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

커링을 왜 사용하는가?


커링은 일부 인자에 같은 값을 반복적으로 사용할 때 그 반복되는 인자를 고정함으로써 중복을 최소화 할 수 있다.

커링을 어디에 사용하는가?

예시를 보자

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

위와 같은 방법으로 가져올 수도 있지만 프로젝트 규모가 커질수록 의도하지 않은 중복된 id를 작성할 수도 있어 예기치 못한 문제가 생길 수 있다.

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

  const getId = onClickGetId("any");

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

위는 커링 기법으로 아이디와 인풋태그에 밸류값을 같이 가지고 올 수 있다.
먼저 고차함수를 하나 만들어주고 매개변수로 id 와 event를 하나씩 준다.
그리고 새로운 변수에 원하는 id이름을 인자로 넣어준 후에 할당해준다.
그 후에 태그에 onChange와 같은 특정 event를 감지하는 속성을 넣어준후에 함수가 할당된 변수를 실행 시켜주면 event의 밸류값과 원하는 id까지 가지고 올 수 있게된다.