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

위와 같이 여러개의 인자를 받는 함수를 2개로 쪼개서 사용하는 것을 볼 수 있다.
위에서 말했던 일부 인자를 고정시키는 새로운 함수를 만든다고 했다.
즉 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 wordl"
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" />;
}

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