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까지 가지고 올 수 있게된다.