테스트 및 성능

이 페이지는 Redux/RTK Query 애플리케이션의 테스트 전략과 성능 최적화 기법을 다룹니다.

Redux 슬라이스 테스트

기본 리듀서 테스트

// user.slice.test.ts
import reducer, { userLoggedIn, userLoggedOut } from './user.slice';

describe('user 슬라이스', () => {
  const initialState = {
    account: null,
    isAuthenticated: false,
  };

  it('userLoggedIn을 처리해야 함', () => {
    const account = '0x123...';
    const actual = reducer(initialState, userLoggedIn({ account }));
    
    expect(actual.account).toBe(account);
    expect(actual.isAuthenticated).toBe(true);
  });

  it('userLoggedOut을 처리해야 함', () => {
    const loggedInState = {
      account: '0x123...',
      isAuthenticated: true,
    };
    
    const actual = reducer(loggedInState, userLoggedOut());
    
    expect(actual.account).toBeNull();
    expect(actual.isAuthenticated).toBe(false);
  });
});

엔티티 어댑터 테스트

// credits.slice.test.ts
import reducer, { txAdded, txsCleared, creditsSelectors } from './credits.slice';

describe('엔티티 어댑터가 있는 credits 슬라이스', () => {
  it('트랜잭션을 추가해야 함', () => {
    const initialState = reducer(undefined, { type: 'unknown' });
    const tx = { id: '1', address: '0x123', amount: 100, type: 'grant', timestamp: Date.now() };
    
    const actual = reducer(initialState, txAdded(tx));
    
    expect(creditsSelectors.selectById({ credits: actual }, '1')).toEqual(tx);
    expect(creditsSelectors.selectTotal({ credits: actual })).toBe(1);
  });

  it('모든 트랜잭션을 지워야 함', () => {
    const initialState = reducer(undefined, { type: 'unknown' });
    const withTx = reducer(initialState, txAdded({ id: '1', /* ... */ }));
    
    const actual = reducer(withTx, txsCleared());
    
    expect(creditsSelectors.selectTotal({ credits: actual })).toBe(0);
  });
});

셀렉터 테스트

단순 셀렉터

// user.selectors.test.ts
import { selectAccount, selectIsAuthenticated } from './user.slice';

describe('user 셀렉터', () => {
  const mockState = {
    user: {
      account: '0x123...',
      isAuthenticated: true,
    },
    // ... 다른 슬라이스
  };

  it('계정을 선택해야 함', () => {
    expect(selectAccount(mockState)).toBe('0x123...');
  });

  it('인증 상태를 선택해야 함', () => {
    expect(selectIsAuthenticated(mockState)).toBe(true);
  });
});

메모이제이션된 셀렉터

// land.selectors.test.ts
import { selectFilteredParcels, selectActiveFiltersCount } from './land.selectors';

describe('land 셀렉터', () => {
  const mockState = {
    land: {
      filters: { owner: '0x123', minPrice: 100 },
      parcels: [
        { id: '1', owner: '0x123', price: 150 },
        { id: '2', owner: '0x456', price: 200 },
      ],
    },
  };

  it('활성 필터 수를 세어야 함', () => {
    expect(selectActiveFiltersCount(mockState)).toBe(2);
  });

  it('필지를 필터링해야 함', () => {
    const result = selectFilteredParcels(mockState);
    expect(result).toHaveLength(1);
    expect(result[0].id).toBe('1');
  });

  it('결과를 메모화해야 함', () => {
    const result1 = selectFilteredParcels(mockState);
    const result2 = selectFilteredParcels(mockState);
    
    // 같은 참조 = 메모화됨
    expect(result1).toBe(result2);
  });
});

MSW로 RTK Query 테스트

MSW 설정

// src/test/server.ts
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';

const handlers = [
  http.get('/api/v1/parcels/:id', ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      x: 10,
      y: 20,
      owner: '0x123',
      name: '테스트 필지',
    });
  }),

  http.post('/api/v1/credits/grant', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({
      ok: true,
      newBalance: 1000,
    });
  }),
];

export const server = setupServer(...handlers);

// src/test/setup.ts
import { server } from './server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

쿼리 테스트

// land.client.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import { setupStore } from '@/app/store';
import { useGetParcelQuery } from './land.client';

function TestComponent({ id }: { id: string }) {
  const { data, isLoading, isError } = useGetParcelQuery({ id });

  if (isLoading) return <div>로딩 중...</div>;
  if (isError) return <div>오류</div>;
  if (!data) return null;

  return <div>{data.name}</div>;
}

describe('land 클라이언트', () => {
  it('필지 데이터를 가져와 표시해야 함', async () => {
    const store = setupStore();

    render(
      <Provider store={store}>
        <TestComponent id="1" />
      </Provider>
    );

    expect(screen.getByText('로딩 중...')).toBeInTheDocument();

    await waitFor(() => {
      expect(screen.getByText('테스트 필지')).toBeInTheDocument();
    });
  });
});

뮤테이션 테스트

// credits.client.test.tsx
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import { setupStore } from '@/app/store';
import { useGrantCreditsMutation } from './credits.client';

function TestComponent() {
  const [grant, { isLoading, isSuccess }] = useGrantCreditsMutation();

  return (
    <div>
      <button onClick={() => grant({ address: '0x123', amount: 100 })}>
        부여
      </button>
      {isLoading && <div>로딩 중...</div>}
      {isSuccess && <div>성공!</div>}
    </div>
  );
}

describe('credits 클라이언트 뮤테이션', () => {
  it('크레딧을 성공적으로 부여해야 함', async () => {
    const store = setupStore();

    render(
      <Provider store={store}>
        <TestComponent />
      </Provider>
    );

    fireEvent.click(screen.getByText('부여'));

    await waitFor(() => {
      expect(screen.getByText('성공!')).toBeInTheDocument();
    });
  });
});

낙관적 업데이트 테스트

// credits.client.test.ts
import { server } from '@/test/server';
import { http, HttpResponse } from 'msw';
import { setupStore } from '@/app/store';
import { creditsClient } from './credits.client';

describe('낙관적 업데이트', () => {
  it('캐시를 낙관적으로 업데이트하고 오류 시 롤백해야 함', async () => {
    const store = setupStore();
    const address = '0x123';

    // 초기 잔액 사전 가져오기
    await store.dispatch(
      creditsClient.endpoints.getBalance.initiate({ address })
    );

    const initialBalance = creditsClient.endpoints.getBalance.select({ address })(
      store.getState()
    ).data?.amount;

    expect(initialBalance).toBe(100); // MSW 핸들러에서

    // 실패 모킹
    server.use(
      http.post('/api/v1/credits/grant', () => {
        return HttpResponse.json({ error: '실패' }, { status: 500 });
      })
    );

    // 뮤테이션 트리거
    const mutation = store.dispatch(
      creditsClient.endpoints.grantCredits.initiate({
        address,
        amount: 50,
      })
    );

    // 낙관적 업데이트 확인
    const optimisticBalance = creditsClient.endpoints.getBalance.select({
      address,
    })(store.getState()).data?.amount;

    expect(optimisticBalance).toBe(150); // 100 + 50

    // 뮤테이션 실패를 기다리기
    await expect(mutation).rejects.toThrow();

    // 롤백 확인
    const rolledBackBalance = creditsClient.endpoints.getBalance.select({
      address,
    })(store.getState()).data?.amount;

    expect(rolledBackBalance).toBe(100); // 원래 상태로
  });
});

성능 최적화

사용 selectFromResult 리렌더를 방지하려면

// ✅ 좋음: 특정 필드만 구독
const { owner } = useGetParcelQuery(
  { id },
  {
    selectFromResult: ({ data }) => ({
      owner: data?.owner,
    }),
  }
);

// 컴포넌트는 owner가 변경될 때만 리렌더링됨

전체 상태 선택을 피하기

// ✅ 좋음: 특정 값 선택
const viewMode = useAppSelector(selectViewMode);
const filters = useAppSelector(selectFilters);

// ❌ 나쁨: 슬라이스 전체를 선택
const ui = useAppSelector((state) => state.ui);

비용이 큰 셀렉터 메모화하기

import { createSelector } from '@reduxjs/toolkit';

// ✅ 좋음: 메모화된 셀렉터
export const selectFilteredParcels = createSelector(
  [selectAllParcels, selectFilters],
  (parcels, filters) => {
    // 비용이 큰 필터링 로직
    return parcels.filter(/* ... */);
  }
);

// ❌ 나쁨: 컴포넌트에서 계산
function Component() {
  const parcels = useAppSelector(selectAllParcels);
  const filters = useAppSelector(selectFilters);
  
  // 렌더링할 때마다 다시 계산됨!
  const filtered = parcels.filter(/* ... */);
}

정규화된 데이터에는 엔티티 어댑터 사용

// ✅ 좋음: 엔티티 어댑터로 정규화
const adapter = createEntityAdapter<Parcel>();

// ID로 효율적인 조회
const parcel = adapter.getSelectors().selectById(state, id);

// ❌ 나쁨: 배열 조회
const parcel = state.parcels.find((p) => p.id === id);

RTK Query 캐시 설정 조정

export const client = createApi({
  // ...
  keepUnusedDataFor: 60, // 데이터를 60초 동안 유지
  refetchOnMountOrArgChange: 30, // 데이터가 30초보다 오래되면 다시 가져오기
  refetchOnFocus: true, // 창이 다시 포커스를 얻으면 다시 가져오기
  refetchOnReconnect: true, // 다시 연결할 때 다시 가져오기
});

더 나은 UX를 위한 사전 가져오기

function ParcelListItem({ parcel }: { parcel: Parcel }) {
  const dispatch = useAppDispatch();

  const handleMouseEnter = () => {
    // 호버 시 사전 가져오기
    dispatch(
      client.util.prefetch('getParcel', { id: parcel.id }, { force: false })
    );
  };

  return (
    <Link to={`/parcels/${parcel.id}`} onMouseEnter={handleMouseEnter}>
      {parcel.name}
    </Link>
  );
}

폴링 전략

// 필요할 때만 폴링
const { data } = useGetBalanceQuery(
  { address },
  {
    pollingInterval: isActive ? 10000 : 0, // 활성 상태일 때만 폴링
    skipPollingIfUnfocused: true, // 탭에 포커스가 없으면 일시 중지
  }
);

Redux DevTools

개발 환경에서 활성화

export const store = configureStore({
  // ...
  devTools: process.env.NODE_ENV !== 'production',
});

액션 정리기

DevTools에서 민감한 데이터를 정리:

const actionSanitizer = (action: any) => {
  if (action.type === 'user/loggedIn') {
    return {
      ...action,
      payload: {
        ...action.payload,
        authToken: '***REDACTED***',
      },
    };
  }
  return action;
};

export const store = configureStore({
  // ...
  devTools: {
    actionSanitizer,
  },
});

모범 사례 체크리스트

성능

• 사용 selectFromResult 대용량 쿼리 결과에 대해

• 비용이 큰 셀렉터를 메모화하려면 createSelector

• 정규화된 컬렉션에는 엔티티 어댑터 사용

• 컴포넌트에서 전체 슬라이스를 선택하지 않기

• 조정 keepUnusedDataFor 사용 사례에 맞게

• 탐색 전에 데이터 사전 가져오기

• 폴링은 전략적으로 사용하기(필요할 때만)

테스트

• 모든 리듀서와 액션에 단위 테스트 작성

• 메모화된 셀렉터의 정확성과 성능 테스트

• RTK Query 엔드포인트 테스트에는 MSW 사용

• 낙관적 업데이트와 롤백 로직 테스트

• 컴포넌트의 오류 처리 테스트

• 중요 흐름에 대한 통합 테스트 작성

코드 품질

• 타입이 지정된 훅 사용 (useAppSelector, useAppDispatch)

• 모든 쿼리 상태(로딩, 오류, 성공) 처리

• 사용 .unwrap() 뮤테이션 오류 처리용

• 뮤테이션 후 캐시 무효화 또는 업데이트

• 직렬화할 수 없는 데이터를 Redux에 두지 않기

• 복잡한 셀렉터와 로직 문서화

피해야 할 안티 패턴

다음은 하지 마세요:

1. 직렬화할 수 없는 객체(providers, signers)를 Redux에 저장하지 않기

2. 슬라이스와 RTK Query 양쪽에 데이터를 중복 저장

3. 렌더링 중에 액션 디스패치

4. 메모화 없이 새 객체를 반환하는 셀렉터 만들기

5. 로딩 및 오류 상태 무시

6. RTK Query 없이 여러 컴포넌트에서 같은 데이터 가져오기

7. 과도하게 폴링하거나 skipPollingIfUnfocused

성능 모니터링

셀렉터 호출 추적

import { createSelector } from '@reduxjs/toolkit';

const selectExpensiveData = createSelector(
  [selectData],
  (data) => {
    console.log('셀렉터 호출됨'); // 데이터가 변경될 때만 로그해야 함
    return expensiveOperation(data);
  }
);

리렌더 모니터링

import { useEffect, useRef } from 'react';

function useRenderCount() {
  const renderCount = useRef(0);
  
  useEffect(() => {
    renderCount.current += 1;
    console.log('렌더링 횟수:', renderCount.current);
  });
}

function Component() {
  useRenderCount(); // 리렌더 추적
  // ...
}

다음 단계

• 검토 컴포넌트 패턴 사용 예시

• 참고 RTK Query 캐싱 전략

• 이해 상태 관리 슬라이스 최적화를 위해