Curring

여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수들의 순차적 체인으로 변환

  • 코드 재사용성 향상
  • 함수의 구성이 더 유연해짐
  • 부분 적용을 통한 새로운 함수 생성 가능
ItemList.tsx
...
const handleClickCurried = id => event => {
  event.preventDefault();
  console.log(id);
};
 
function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li 
          key={item.id} 
          onClick={handleClickCurried(item.id)}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}
config.ts
const configure = defaults => options => {
  return { ...defaults, ...options };
};
 
const defaultConfig = {
  theme: 'light',
  language: 'en',
  timeout: 3000
};
 
const createConfig = configure(defaultConfig);
 
// 사용 예시
const koreanConfig = createConfig({ language: 'ko' });
const darkKoreanConfig = createConfig({ language: 'ko', theme: 'dark' });