JavaScript 커링(Currying) 이해하기: 6가지 실전 활용 사례

1// 커링 함수 선언
2const applyDiscount = discountRate => price => {
3  return price - price * discountRate;
4};
5
6// 이렇게도 쓸 수 있고
7const tenPercentDiscount = applyDiscount(0.10);
8const discountedPrice = tenPercentDiscount(100);
9console.log(discountedPrice); // 출력: 90
10
11// 연속적으로 호출해서 이렇게도 쓸 수 있다.
12const directlyDiscountedPrice = applyDiscount(0.15)(50);
13console.log(directlyDiscountedPrice); // 출력: 42.5

1function multiply(a) {
2  return function(b) {
3    return a * b;
4  };
5}
6
7// a=2라는 상태를 기억하는 클로저다.
8const double = multiply(2); 
9
10// 두 번째 인자를 전달해 함수를 지연 실행할 수 있다.
11console.log(double(4));  // 8 (2 * 4)

1function MyComponent() {
2
3	// 이벤트 핸들러를 커링 함수로 사용하면 가독성이 좋아진다.
4  const handleItemClick = itemId => event => {
5    console.log(`Item ${itemId} clicked`, event);
6  };
7
8  return (
9    <div>
10      {['item1', 'item2', 'item3'].map(itemId => (
11        <button key={itemId} onClick={handleItemClick(itemId)}>
12          Click {itemId}
13        </button>
14      ))}
15    </div>
16  );
17}

1const createAPIEndpoint = base => endpoint => params => {
2  const query = new URLSearchParams(params).toString();
3  return `${base}/${endpoint}?${query}`;
4};
5
6// 기본 API URL
7const baseAPI = createAPIEndpoint('https://example.com/api');
8
9// 엔드포인트 확장
10const fetchUser = baseAPI('user');
11const fetchPosts = baseAPI('posts');
12
13// 사용 예시
14const userAPIPath = fetchUser({ id: '123' });
15console.log(userAPIPath); // "https://example.com/api/user?id=123"
16
17const postsAPIPath = fetchPosts({ userId: '123', limit: 10 });
18console.log(postsAPIPath); // "https://example.com/api/posts?userId=123&limit=10"

1// 커링 함수를 이용한 HOC 선언
2function withLoading(WrappedComponent) {
3  return function({ isLoading, ...rest }) {
4    if (isLoading) {
5      return <div>Loading...</div>;
6    } else {
7      return <WrappedComponent {...rest} />;
8    }
9  };
10}
11
12// 예시 컴포넌트 선언
13function MyComponent({ data }) {
14  return (
15    <div>
16      <h1>My Component</h1>
17      <p>{data}</p>
18    </div>
19  );
20}
21
22// 사용 예시
23const MyComponentWithLoading = withLoading(MyComponent);
24
25function App() {
26	// 데이터를 가져오는 상태 시뮬레이션
27  const [loading, setLoading] = useState(true);
28  const [data, setData] = useState(null);
29
30	...
31
32	return (
33		<MyComponentWithLoading isLoading={loading} data={data} />
34	);
35}

1import React from "react";
2
3// 커링 함수를 사용한 컴포넌트 생성 함수
4const createComponent = (Component) => (properties) => {
5  return <Component {...properties} />;
6};
7
8// 커링 함수 사용하여 특정 컴포넌트 생성 함수 만들기
9const createButton = createComponent("button"); // HTML button 요소
10const createLabel = createComponent("label"); // HTML label 요소
11
12// 개별 컴포넌트 생성
13const BlueButton = () =>
14  createButton({ style: { color: "blue" }, children: "Click me" });
15const LargeLabel = () =>
16  createLabel({ style: { fontSize: "large" }, children: "Label text" });
17
18// 사용 예시
19function App() {
20  return (
21    <div>
22      <BlueButton />
23      <LargeLabel />
24    </div>
25  );
26}
27
28export default App;

1/** 커링 함수로 구현한 상태 업데이트 함수
2* field: 업데이트할 상태의 필드명.
3* newValue: 새로 설정할 값.
4* state: 현재 상태.
5**/
6const updateField = field => newValue => state => ({
7  ...state,
8  [field]: newValue
9});
10
11function userReducer(state = {}, action) {
12  switch (action.type) {
13		// 커링 함수를 사용하는 경우
14    case 'UPDATE_USER_FIELD':
15      return updateField(action.field)(action.value)(state);
16		// 일반적으로 사용하는 경우
17		case 'UPDATE_USER_FIELD':
18      return {
19        ...state,
20        [action.field]: action.value
21      };
22    // 다른 액션 핸들링...
23    default:
24      return state;
25  }
26}
27
28// 이하 사용 방식 동일
29const updateUserField = (field, value) => ({
30  type: 'UPDATE_USER_FIELD',
31  field,
32  value
33});
34
35
36dispatch(updateUserField(field, value));

1import { pipe, add, multiply } from 'ramda';
2
3const multiplyByTwo = multiply(2);
4const addOne = add(1);
5
6const doubleAndIncrement = pipe(
7  multiplyByTwo, // 먼저 적용
8  addOne         // 나중에 적용
9);
10
11const result = doubleAndIncrement(3); // 먼저 3에 2를 곱하고, 그 결과에 1을 더함
12console.log(result); // 결과: 7 (3 * 2 + 1)
13
14// 즉, 이 코드와 동일하다.
15console.log(addOne(multiplyByTwo(3)));

1import { compose, add, multiply } from 'ramda';
2
3const multiplyByTwo = multiply(2);
4const addOne = add(1);
5
6const incrementAndDouble = compose(
7  multiplyByTwo, // 나중에 적용
8  addOne         // 먼저 적용
9);
10
11const result = incrementAndDouble(3); // 먼저 3에 1을 더하고, 그 결과에 2를 곱함
12console.log(result); // 결과: 8 (3 + 1) * 2
13
14// 즉, 이 코드와 동일하다.
15console.log(multiplyByTwo(addOne(3)));