Curring

여러 인수를 취하는 함수를 각각 단일 인수를 취하는 일련의 함수로 변환하는 기술로 함수형 프로그래밍에서 자주 사용된다.

// original
function multiple(x,y,z) {
  return x * y * z;
}
console.log(multiple(1,2,3)); // 6

// curried
function multiple(x) {
  return (y) => {
    return (z) => {
      return x * y * z;
    }
  }
}
console.log(multiple(1)(2)(3)); // 6

이벤트 핸들러 활용

• 이벤트 인자를 제외한 인자를 하나 이상 가지고 있을 경우 익명함수로 핸들러 호출해야 한다.

import React from 'react';

const Component = () => {
  const items = [];
  
  const handleClick = (item) => {
    console.log(`item: ${item}`);
  }
  
  return (
    <>
      {
        items.map(item => (
          <div>
            <button 
              type="button" 
              onClick={() => handleClick(item)}
            >
              Button
            </button>
          </div>
        )) 
      }
    </>
  )
}

export default Component;

• 커링을 활용하면 다음과 같은 표현식이 가능

import React from 'react';

const Component = () => {
  const items = [];
  
  /*
  이 함수의 초기 호출은 이제 원래 화살표 함수
  onClick={() => } 대신 사용할 수 있는 익명 함수를 반환한다.
  */
  const handleClick = (item) => () => {
    console.log(`item:  ${item}`);
  }
  
  return (
    <>
      {
        items.map(item => (
          <div>
            <button 
              type="button" 
              onClick={handleClick(item)}
            >
              Button
            </button>
          </div>
        )) 
      }
    </>
  )
}

export default Component;

콜백함수 및 이벤트 핸들러 특징

• 콜백함수를 연결할때 인자를 똑같이 사용한다면 축약해서 사용이 가능하다.

const printNum = (num) => {
  console.log(num);
}
[1, 2, 3, 4].map((num) => printNum(num)); // 1, 2, 3, 4
// 아래와 같이 축약이 가능하다.
[1, 2, 3, 4].map(printNum); // 1, 2, 3, 4

• 이벤트 핸들러(이벤트 리스너에 전달되는 콜백함수)는 기본적으로 이벤트인자를 제공받는다.

// 모두 같은 결과
onClick={(e) => handleClick(e)}
onClick={handleClick}