커링(curring). 고차함수 계열 기법의 하나다. 인자가 여러 개인 함수의 일부 인자를 고정시키고 새로운 함수를 만드는 방법이다. 조금 더 설명하자면, 함수 인자가 n개라면 함수도 n개로 분리해 사용하는 것. 말로 들으면 이해하기 어렵다. 수포자였던 필자도 말만 듣고는 한 번에 이해하지 못했다. 코드로 먼저 살펴보자.
// 이 코드를
function helloFunc(word, name) {
console.log(`${word}, ${name}`);
}
// 이렇게 바꿨다.
function helloFunc(word) {
return function (name) {
console.log(`${word}, ${name}`);
};
}
위 코드를 보자. word, name을 인자로 받은 코드를 word 하나 남기고 해당 함수 안에 새로운 함수를 만들어 name을 인자로 주었다. 인자 2개를 받았던 함수 하나를, 인자 1개를 받는 함수 2개로 쪼겠다. 이게 커링이다. 만약 인자가 4개라면? 함수 4개로 나누는 것이다.
function helloFunc(word) {
return function (name) {
return function(word2){
return function(name2){
console.log(`${word}, ${name} || ${word2}, ${name2}`)
}
}
};
}
커링은 나눈 함수를 체이닝으로 생성해 사용하는 방식이다. 사용방법은 아래와 같다.
const print = helloFunc("hello")("Tibetan Fox")("Good morning");
print("Tiger"); // hello, Tibetan Fox || Good morning, Tiger 출력
왜? 커링?
이런게 있다는 것을 알았지만, 왜 커링을 써야하는지, 어디에 써야하는지를 알기 어려웠지만, 생각보다 많은 사람들이 예시를 많이 알려주었다. 난 그 중 이해하기 제일 쉬웠던 코드 하나를 정리했다. 바로 경고를 담은 alert이다.
function log(date, importance, message) {
alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
}
위와 같이 특정 메세지를 담았고 해당 시간을 표출하는 함수가 있다고 가정하자. 이를 커링적용했을 때 다음과 같다.
function log(date) {
return function(importance){
return function(message){
alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`);
}
}
}
log(new Date())("DEBUG")("some debug"); // log(a)(b)(c) 체이닝 형식으로 실행
// [09:30] ["DEBUG"] some debug
커링 함수를 이용해 특정 인수를 고정할 수도 있다. 'partially 적용된 함수' 혹은 'partial'이라고도 부른다.
let logNow = log(new Date()); // logNow는 첫번째 인자가 고정된 curring 함수가 되었다.
logNow("INFO", "message"); // [09:30] [INFO] message
위처럼 특정함수를 고정할 수도 있다. 두번째, 세번째 인자까지 고정한 새로운 curring 함수를 만들 수도 있다. 물론, log 함수는 그대로 있으므로 어느쪽으로 사용하든 문제 없다. 첫번째를 데이트로 고정해두고 여러 페이지마다 해당하는 함수를 불러와 사용한다면 의미있는 커링 사용이 될 수 있다.
마무리
사실, 커링을 처음 들었을 때, 고차함수와 다른게 뭐지 싶었다. 함수 안에 함수가 있는데, 고차함수란 명칭을 두고 왜 커링이란 명칭을 중복으로 사용하나 싶었다. 여러 글을 찬찬히 읽다보니 단순히 함수 안에 함수를 뜻하는 게 아님을 금방 깨닫게 되었다. 인자 갯수가 커닝의 핵심이었다. 사용할 때도 고차함수로 사용하다보니 시인성도 좋아지고, 일부분을 고정해 사용할 경우 똑같은 코드를 재작성할 필요도 없어 보였다.
※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)
'FE > React' 카테고리의 다른 글
useForm handleSubmit이 동작하지 않는다. (0) | 2022.12.12 |
---|---|
memoization(feat. useMemo, useCallback) (0) | 2022.10.26 |
Optimistic-UI (0) | 2022.10.25 |
Shallow Routing (0) | 2022.10.25 |
LazyLoad & PreLoad (0) | 2022.10.24 |