11.30 - Currying으로 onClick handler 함수 깔끔하게 작성하기

1. Currying으로 onClick handler 함수 깔끔하게 작성하기

Currying이란, 여러개의 인자를 받는 함수를, 하나의 인자만 받는 함수의 연속으로 바꾸는 것

// Original function
function multiply(x,y,z) {
  return x * y * z
}
console.log(multiply(1,2,3))

// Curried version
function multiply(x) {
    return (y) => {
        return (z) => {
            return x * y * z
        }
    }
}
console.log(multiply(1)(2)(3))

In React

import * as React from "react";

const TestComponent: React.FunctionComponent = (props) => {
  const myList: any[] = [];

  const onClickItem = (item: any) => {
    console.log("Item: ", item);
  };
  
  const curriedOnClickItem = (item: any) => () => {
    console.log("Item: ", item);
  }

  return (
    <div>
      {myList.map((item) => (
        <div>
          <button onClick={() => onClickItem(item)}>My Button</button>
          <button onClick={curriedOnClickItem(item)}>My Button</button>
        </div>
      ))}
    </div>
  );
};

export default TestComponent;