Redux를 쓰거나 아니면 모종의 이유에서든 다음과 같은 표현을 본 적이 있을 것이다.
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
const AddTodo = () => {
let input
// ... 생략
}
export default connect()(AddTodo)알고보면 참 쉽지만 처음 보면 무슨 표현인지 헷갈릴 수도 있다. 이를 이해하려면 다음과 같은 문제를 풀어보면 된다.
// 10 20 30을 더한 값을 return 하는 다음과 같은 trippleAdd 함수를 구현하시오
trippleAdd(10)(20)(30)이게 뭐지? 라고 하고 생각할 수 있다. 왜냐햐면 우리가 보통 보는 3개의 값을 더해 return 하는 것은 다음과 같이 처리하면 되니까.
function trippleAdd(num1, num2, num3){
return num1+num2+num3
}그렇지만 return을 이용하면 이렇게도 만들어 낼 수도 있는 것이다.
function trippleAdd(num1){
return function(num2){
return function(num3){
return num1+num2+num3
}
}
}
const trippleAdd =num1=>num2=>num3=>num1+num2+num3; //이렇게 하면 한 줄 구현함수가 return 하는 것을 잘 이해한다면 쉽게 구현할 수 있는 문제이다. 응용한다면 다음과 같은 것도 만들 수 있다.
function quadrupleAdd(num1) {
return function(num2) {
return function(num3, num4) {
return num1 + num2 + num3 + num4;
};
};
}앞으로 JS에서 foo(a)(b)를 보더라도 금방 이해할 수 있을 것이다.