React Currying

커링(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

위와 같이 여러 개의 인자를 받는 함수를 두 개로 쪼개서 사용하는 것을 볼 수 있다.
위에서 일부 인자를 고정시키는 새로운 함수를 만든다고 했다.

즉, 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 world"
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 />;
}

위는 커링 기법으로 아이디와 input 태그에 value 값을 같이 가지고 올 수 있다.
먼저 고차함수를 하나 만들어주고 매개변수와 id와 event를 하나씩 준다.
그리고 새로운 변수에 원하는 id이름을 인자로 넣어준 후에 할당해준다.
그 후에 태그에 onChange와 같은 특정 event를 감지하는 속성을 넣어준 후에 함수가 할당된 변수를 실행시켜주면 event의 value 값과 원하는 id까지 가지고 올 수 있게 된다.