Currying
리액트에서 많이 사용되는 개념이 하나가 있는데, 커링(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위와 같이 화살표 함수로 작성가능하고 코드의 길이가 조금은 줄어들게 된다.
또한 가독성도 증가한다.
왜 사용하는가?
커링은 일부 인자에 같은 값을 반복적으로 사용할 때 그 반복되는 인자를 고정함으로써 중복을 최소화 할 수 있다.
aaa("hello", "world")
aaa("hello", "chulsu")
aaa("hello", "huni")위와 같이 중복되는 인자가 존재한다고 가정해 보자.
const aaa = (a) => (b) => {
console.log( a + " " + b )
}
const ccc = aaa("hello")
ccc("world") // "hello wordl"
ccc("chulsu") // "hello chulsu"
ccc("huni") // "hello huni"그럼 위와 같이 커링을 사용하면 중복 인자를 해결할 수 있다.
어디에 사용하는가?
예시로 특정 태그에 아이디를 주고 그 아이디를 받아올 경우를 가정해보자.
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까지 가지고 올 수 있게된다.
