자바스크립트 커링(Currying) 함수 이해하기

커링 함수는 함수의 인자를 여러 개의 인자를 받을 수 있는 함수로 변환하는 과정을 말합니다. 이 글에서는 자바스크립트 커링 함수의 개념, 장점, 예시, 그리고 활용 사례에 대해 알아보겠습니다.

 

 

커링 함수(currying function)란?

커링(Currying)은 함수를 여러 개의 인자를 받는 함수로 나누는 기법입니다. 커링은 함수형 프로그래밍에서 사용되며, 함수의 재사용성과 일부 인자를 미리 지정하여 새로운 함수를 생성하는 유연성을 제공합니다.

커링 함수의 장점

커링 함수는 다음과 같은 장점을 가지고 있습니다.

재사용성

커링 함수를 사용하면 함수를 더욱 재사용하기 쉽게 만들 수 있습니다. 일부 인자를 고정시켜 놓고 나머지 인자만 받는 새로운 함수를 생성할 수 있기 때문에, 같은 로직을 다양한 인자에 적용할 수 있습니다.

코드 가독성

커링 함수를 사용하면 함수의 인자를 더 명확하게 표현할 수 있습니다. 커링 함수는 인자를 단계적으로 받기 때문에, 함수의 호출 과정을 더욱 명확하게 이해할 수 있습니다.

코드 유지 보수성

커링 함수를 사용하면 코드의 유지 보수가 용이해집니다. 기존 함수를 변경하지 않고, 커링 함수를 통해 새로운 함수를 생성하기 때문에, 기존 코드에 영향을 주지 않고도 새로운 기능을 추가하거나 수정할 수 있습니다.

커링 함수 예시

function add(a) {
  return function(b) {
    return a + b;
  };
}

const addTwo = add(2); // 첫 번째 인자를 2로 고정한 새로운 함수 생성
console.log(addTwo(3)); // 5 출력
console.log(addTwo(5)); // 7 출력

위의 코드에서 add 함수는 인자 a를 받고, 두 번째 함수를 반환합니다. 반환된 함수는 인자 b를 받고, a와 b를 더한 값을 반환합니다. 이렇게 add 함수를 호출하여 addTwo 함수를 생성한 후, addTwo 함수에 인자를 전달하여 덧셈을 수행할 수 있습니다.

 

arrow function으로 선언하기

const add = a => b => a + b;

const addTwo = add(2);
console.log(addTwo(3)); // 5 출력
console.log(addTwo(5)); // 7 출력

리액트에서 커링 함수 선언하기

react에서 해당 요소의 이벤트 함수를 추가 할때 각각의 이벤트 함수를 선언해줘야 하지만 커링 함수를 사용하면 각각 이벤트 함수를 선언하지 않아도 된다.

커링 함수 선언 전

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");

// 일반 함수 선언
const handleName = (event) => {
	setName(event.target.value);
};

const handleEmail = (event) => {
  setEmail(event.target.value);
};
  
const handlePhone = (event) => {
  setPhone(event.target.value);
};

<input value={name} onChange={handleName} />
<input type="email" value={email} onChange={handleEmail} />
<input value={phone} onChange={handlePhone} />

커링 함수 선언 후

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
// 커링 함수
function handleChange (setState) {
	return function (event) {
		return setState(event.target.value)
	}
}

// 화살표 함수
const handleChange = (setState) => (event) => {
 setState(event.target.value);
};

<input value={name} onChange={handleChange(setName)} />
<input type="email" value={email} onChange={handleChange(setEmail)} />
<input value={phone} onChange={handleChange(setPhone)} />

결론

이 글에서는 자바스크립트 커링 함수에 대해 알아보았습니다. 커링 함수는 함수의 인자를 고정시키고, 나머지 인자를 받을 수 있는 새로운 함수를 반환하는 개념입니다. 이를 통해 재사용성과 코드의 가독성, 유지 보수성을 높일 수 있습니다. 커링 함수는 다양한 상황에서 유용하게 활용될 수 있으며, 조건 체크 함수나 부분 적용 함수 등의 예시를 들 수 있습니다.