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의 벨류값과 원하는 id까지 가지고 올 수 있게된다.
