액션에서 계산을 분리하기

프로그래밍에서 액션과 계산을 구분하는 것은 코드의 명확성과 유지보수성을 크게 높여 줍니다. 특히 액션 속에 숨어 있는 계산을 따로 빼내면, 테스트하기 쉽고 재사용하기 좋은 함수가 됩니다. 이번 장에서는 함수의 입력과 출력에서 출발해, 액션에서 계산을 분리하는 방법을 살펴보겠습니다.

1. 함수의 입력과 출력

모든 함수에는 입력과 출력이 있습니다.

입력: 함수에서 계산에 사용되는 외부 정보
출력: 함수 밖으로 전달되는 정보, 혹은 동작

tsx

const addToTotal = (amount) => {
    // ...
    return total;
};

// 인자: amount -> 입력
// 반환값: total -> 출력

보통 인자는 입력, 반환값은 출력으로 이해하지만, 이 외에 암묵적인 입력과 출력도 존재합니다.

암묵적 입력과 출력

전역 변수를 읽는 것 → 암묵적 입력
전역 변수를 변경하는 것 → 암묵적 출력

tsx

const addToTotal = () => {
    const amount = window.amount; // 암묵적 입력
    window.total += amount; // 암묵적 출력
};

이처럼 암묵적 입력·출력을 부수 효과(Side Effect) 라고 부르고, 부수 효과가 있는 함수를 액션이라고 합니다. 액션에서 이런 암묵적 요소를 단서 삼아 계산을 빼낼 수 있습니다.

2. 액션에서 계산 빼내기

액션에서 계산을 분리한다는 것은, 외부 상태를 다루는 코드와 값 자체를 계산하는 코드를 떼어내는 것을 의미합니다. 외부 상태는 DOM, DB, 전역 변수 등 다양할 수 있지만, 여기서는 전역 변수를 예로 들어 보겠습니다.

2.1 실제로 분리해 보기

아래는 장바구니에 새 상품을 추가하고 총 비용을 계산하는 액션입니다.

tsx

function add_item_to_cart(name, price) {
    shopping_cart.push({
        name,
        price,
    });
    calc_cart_total();
}

이 함수는 전역 변수 shopping_cart를 바꾸므로 암묵적 출력이 있습니다. 여기서 계산을 분리하기 위해서는 다음 두 가지를 수행해야 합니다.

비즈니스 규칙을 계산 함수로 따로 분리
암묵적 출력을 리턴값으로 바꾸기

tsx

// 액션
function add_item_to_cart(name, price) {
    // 외부 상태 갱신
    shopping_cart = add_item(shopping_cart, name, price);
    // 계산된 총합 반영
    calc_cart_total();
}

// 계산
function add_item(cart, name, price) {
    const new_cart = cart.slice();
    new_cart.push({ name, price });
    return new_cart;
}

비즈니스 규칙이란?

비즈니스 규칙은 프로그램에서 “무엇을 해야 하는가”를 정의하는 부분입니다. 예를 들어:

장바구니 총합 계산
할인율 적용
잔액 부족 여부 판별

이런 규칙은 외부 상태와 분리해 계산 함수로 만들면, 테스트와 재사용이 훨씬 쉬워집니다.

3. 단계별 계산 추출 방법

액션에서 계산을 빼내는 구체적인 절차는 다음과 같습니다.

액션 안에서 계산 부분을 찾아 별도의 함수로 분리합니다.
새 함수의 암묵적 입력·출력을 찾습니다.
암묵적 입력은 인자로, 암묵적 출력은 리턴값으로 바꿉니다.

정리하며

액션과 계산을 분리하면, 외부 세계와 상호작용하는 코드는 최소화되고, 순수한 계산 코드는 어디서든 예측 가능하게 쓸 수 있습니다. 결국 목표는 단순합니다. 액션을 작게 만들고, 계산을 최대한 밖으로 빼내기. 이렇게 하면 코드가 더 테스트하기 쉽고, 유지보수도 훨씬 수월해집니다.

액션에서 계산을 분리하기 ​

1. 함수의 입력과 출력 ​

암묵적 입력과 출력 ​

2. 액션에서 계산 빼내기 ​

2.1 실제로 분리해 보기 ​

비즈니스 규칙이란? ​

3. 단계별 계산 추출 방법 ​

정리하며 ​