React에서 이벤트 핸들러 동작 방식을 공부하다가 커링과 고차 함수 개념까지 이어졌습니다. 그 과정을 정리해봤습니다.
커링(Currying)과 고차 함수(Higher-Order Function)
커링
커링은 고차 함수의 한 형태로, 다중 인자를 받는 함수를 하나의 인자만 받는 함수들의 연속적인 반환 형태로 변환하는 기법입니다. 커링을 사용하면 여러 인자를 순차적으로 처리할 수 있게 되어 코드의 재사용성과 함수 조합이 용이해집니다.
예를 들어, 두 개의 인자를 받는 함수는 아래처럼 다중 인자 함수를 하나의 인자만 받는 함수들의 체인으로 변환할 수 있습니다.
// 2개의 인자를 받는 함수
function add(a, b) {
return a + b;
}
// 고차함수 이면서 currying된 함수
const curriedAdd = (a) => (b) => a + b;
console.log(curriedAdd(2)(3)); // 5
const addTwo = curriedAdd(2); // 첫 번째 인자 2를 고정
console.log(addTwo(4)); // 6장점
1. 코드의 재사용성이 높아짐
특정 값을 고정 한 함수를 만들어 재사용 가능합니다.
const curriedAdd = (a) => (b) => a + b;
console.log(curriedAdd(2)(3)); // 5
const addTwo = curriedAdd(2); // 첫 번째 인자 2를 고정
console.log(addTwo(4)); // 6
console.log(addTwo(5)); // 7- 함수 조합에 유용
여러 함수를 조합하여 복잡한 로직을 단순하게 만들 수 있습니다.
// 커링된 multiply 함수 (첫 번째 인자를 받는 함수)
const multiply = (a) => (b) => a * b;
// 2배, 3배, 4배의 함수 생성
const multiplyBy2 = multiply(2);
const multiplyBy3 = multiply(3);
const multiplyBy4 = multiply(4);
console.log(multiplyBy2(5)); // 10
console.log(multiplyBy3(5)); // 15
console.log(multiplyBy4(5)); // 20고차 함수 (Higher-Order Function)
고차 함수는함수를 인자로 받거나 반환하는 함수로 함수형 프로그래밍에서 주로 사용되며, 콜백 패턴을 구현할 때 자주 활용됩니다.
예를 들어, 배열 메서드인 map, filter, reduce도 고차 함수입니다. setTimeout도 콜백 함수를 인자로 받기 때문에 고차 함수입니다.
function higherOrderFunction(callback) {
console.log("고차 함수 실행");
callback();
}
function sayHello() {
console.log("안녕하세요!");
}
higherOrderFunction(sayHello);
const double = (x) => x * 2;
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);
console.log(doubledNumbers); // [2, 4, 6, 8]커링과 고차 함수의 차이점
커링은 고차 함수의 특정 형태로 볼 수 있습니다.
커링은 다중 인자 함수를 하나의 인자만 받는 함수들의 체인으로 변환하는 기법이며, 고차 함수는 함수를 인자로 받거나 반환하는 함수입니다.
따라서 모든 커링된 함수는 고차 함수지만, 모든 고차 함수가 커링된 것은 아닙니다.
헨들러 동작 방식의 차이
차이점
React에서 이벤트 핸들러에 함수를 전달할 때, 함수 참조를 전달해야 하지만, 함수 호출을 전달하면 렌더링 시점에 실행되기 때문에 의도한 동작과 다르게 실행됩니다.
<button onClick={handleClick}>Click</button> // 정상 동작
<button onClick={handleClick()}>Click</button> // 잘못된 동작, 렌더링 시점에 실행됨
<button onClick={() => alert('Hello')}>Click</button> // 정상
<button onClick={alert('Hello')}>Click</button> // 잘못된 동작, 렌더링 시점에 실행됨렌더링 시점에 실행되는 함수
화면을 처음 불러오면 바로 실행되고, 클릭이나 이벤트가 발생해도 다시 실행되지 않음.
이벤트 핸들러에서 실행되는 함수
이벤트가 발생할 때만 실행됨.
커링을 사용한 이벤트 핸들러
일반적으로 onClick 핸들러에서 인자를 전달하려면 아래와 같이 익명 함수를 사용합니다.
<button onClick={() => handleClick('Hello')}>Click</button>;이 방식도 잘 동작하지만, 매번 새로운 익명 함수가 생성되므로 불필요한 함수 생성이 발생할 수 있습니다. 이때, 커링을 활용하면 불필요한 익명 함수 생성 문제를 해결할 수 있습니다.
const handleClick = (message) => () => {
console.log(message);
};
<button onClick={handleClick('Hello')}>Click</button>;요약
- 고차 함수는
함수를 인자로 받거나 반환하는 함수 - 커링은
다중 인자 함수를 단일 인자 함수들의 체인으로 변환하는 기법 - 커링은 고차 함수의 한 형태이며, 모든 커링된 함수는 고차 함수이지만, 모든 고차 함수가 커링된 것은 아닙니다.
- 커링을 활용하면 불필요한 익명 함수 생성 문제를 해결하고, 이벤트 핸들러에서 코드의 효율성을 높일 수 있습니다.
