React Currying

리액트에서 많이 사용되는 개념 중 하나인 커링(Currying)기법에 대해 알아보자.

• 커링은 인자를 여러개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법.
• 함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법
• JS 내부에는 커링이 내장되어 있지 않지만 JS 로 구현이 가능하다.

function helloFunc(word, name) {
    console.log(`${word}, ${name}`);
}

word, name 이라는 두개의 인자를 받아 출력한다
커링 적용을 시켜보면

function helloFunc(word) {
    return function (name) {
        console.log(`${word}, ${name}`);
    };
}

const printHello = helloFunc("안녕"); 
printHello("멍멍이");  // 안녕, 멍멍이
printHello("야옹이");  // 안녕, 야옹이

2개의 인자를 받던 함수가 1개의 인자를 받는 함수 2개로 쪼개진 것을 볼 수 있음
또한 첫 번째 인자인 word를 "안녕" 이라는 값으로 고정되고, name만 인자로 받으며 사용한다.

커링 기법은 일부 인자에 같은 값을 반복적으로 사용할 때 그 값을 고정함으로써 중복을 최소화 하는 기법이다.

특정 태그에 아이디를 주고 그 아이디를 받아올 경우를 가정.

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 까지 가지고 올 수 있음!