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' });