부수효과(Side Effect)를 최소화해서 모듈을 작성하는 방법

function OrderPage({ orderId }) {
  const [order, setOrder] = useState(null);
  
  useEffect(() => {
    // 1. 데이터 페칭
    fetch(`/api/orders/${orderId}`)
      .then(res => res.json())
      .then(data => {
        setOrder(data);
        // 2. 외부 환경 조작 (부수효과)
        document.title = `Order #${data.id}`;
        analytics.track('order_viewed', { orderId: data.id });
      });
  }, [orderId]);
 
  if (!order) return <Spinner />;
  
  // 3. 비즈니스 로직
  const subTotal = order.items.reduce((sum, item) => sum + item.price, 0);
  const tax = subTotal * 0.1;
  const total = subTotal + tax;
 
  return (
    <div>
      <h1>Order #{order.id}</h1>
      {/* ... UI 렌더링 ... */}
      <p>Total: ${total}</p>
    </div>
  );
}

export const calculateTotals = (items) => {
  if (!items || items.length === 0) {
    return { subTotal: 0, tax: 0, total: 0 };
  }
  const subTotal = items.reduce((sum, item) => sum + item.price, 0);
  const tax = subTotal * 0.1;
  const total = subTotal + tax;
  return { subTotal, tax, total };
};

import { useState, useEffect } from 'react';
import { api } from '../services/api'; // API 클라이언트 의존성
 
export function useOrder(orderId) {
  const [order, setOrder] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    setLoading(true);
    api.getOrderById(orderId)
      .then(setOrder)
      .finally(() => setLoading(false));
  }, [orderId]);
 
  return { order, loading };
}

// analytics 객체를 인자로 받아 추상화 계층을 만든다.
export const createTrackingService = (analytics) => ({
  trackOrderViewed: (orderId) => {
    analytics.track('order_viewed', { orderId });
  }
});
 
// 실제 프로덕션에서 사용할 인스턴스
import { analyticsClient } from './analytics-client';
export const trackingService = createTrackingService(analyticsClient);

import { useEffect } from 'react';
import { useOrder } from '../hooks/useOrder';
import { calculateTotals } from '../domain/order';
import { trackingService } from '../services/tracking'; // 의존성 주입된 인스턴스 사용
 
function OrderPage({ orderId }) {
  const { order, loading } = useOrder(orderId);
 
  // 부수효과 실행은 한 곳에서 명확하게 관리
  useEffect(() => {
    if (order) {
      document.title = `Order #${order.id}`;
      trackingService.trackOrderViewed(order.id);
    }
  }, [order]);
 
  if (loading) return <Spinner />;
  
  // 순수 함수를 이용한 상태 계산
  const { total } = calculateTotals(order.items);
 
  return (
    <div>
      <h1>Order #{order.id}</h1>
      {/* ... UI 렌더링 ... */}
      <p>Total: ${total}</p>
    </div>
  );
}

test('calculateTotals는 빈 배열에 대해 0을 반환해야 한다', () => {
  expect(calculateTotals([])).toEqual({ subTotal: 0, tax: 0, total: 0 });
});

test('trackOrderViewed는 올바른 이벤트 이름과 데이터를 전달해야 한다', () => {
  const mockAnalytics = { track: jest.fn() };
  const service = createTrackingService(mockAnalytics);
  service.trackOrderViewed('123');
  expect(mockAnalytics.track).toHaveBeenCalledWith('order_viewed', { orderId: '123' });
});

import { test, expect } from '@playwright/test';
 
const MOCK_ORDER_DATA = {
  id: '123',
  items: [{ price: 8000 }, { price: 2000 }],
};
 
test.describe('OrderPage', () => {
  test('주문 상세 정보를 올바르게 표시하고 부수효과를 실행해야 한다', async ({ page }) => {
    // 1. API 요청 가로채기 (Mocking)
    await page.route('/api/orders/123', (route) => {
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify(MOCK_ORDER_DATA),
      });
    });
 
    // 2. 분석(Analytics) API 요청을 감시할 Promise 생성
    const analyticsRequestPromise = page.waitForRequest(
      (req) => req.url().includes('/api/analytics') && req.method() === 'POST'
    );
 
    // 3. 페이지로 이동하여 컴포넌트 렌더링
    await page.goto('/orders/123');
 
    // 4. UI 검증: 순수 로직의 계산 결과가 올바르게 표시되는가?
    await expect(page.getByRole('heading')).toHaveText('Order #123');
    await expect(page.getByText('Total: $11000')).toBeVisible(); // 10000 * 1.1
 
    // 5. 부수효과 검증 (1): document.title이 올바르게 변경되었는가?
    await expect(page).toHaveTitle('Order #123');
 
    // 6. 부수효과 검증 (2): 분석 이벤트가 올바른 데이터와 함께 전송되었는가?
    const analyticsRequest = await analyticsRequestPromise;
    const postData = JSON.parse(analyticsRequest.postData());
    expect(postData.event).toBe('order_viewed');
    expect(postData.payload.orderId).toBe('123');
  });
});