React | Currying

커링(Currying) 기법

인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법. 인자가 n개인 함수를 n개로 분리하여 사용하게끔 만드는 기법이다.

예시 코드

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

const printHello = helloFunc("hello"); 
printHello("Tibetan Fox"); // hello, Tibetan Fox
printHello("Tiger");       // hello, Tiger

커링 적용 후

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

n개의 인자를 받던 함수가 n(2)개로 쪼개진 것을 볼 수 있다.

첫 번째 인자인 word를 hello라는 값으로 고정하고, 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까지 가지고 올 수 있게된다.

❗️❗️❗️주의할 점❗️❗️❗️

커링 기법을 적용할 때는 인자의 순서가 매우 중요하다. 변동 가능성이 적은 인자는 앞에, 변동 가능성이 높은 인자는 뒤에 배치해야 합니다. 반드시 이 점을 고려하면서 커링을 사용해야 한다

React Currying | https://velog.io/@uiop5487/React-Currying

리액트(React) - 고차 함수, 커링(Currying) 기법 | https://tibetsandfox.tistory.com/32