React 페이지네이션에서 로그인이 풀릴 때

React에서 페이지네이션을 구현할 때, 다음 페이지로 넘어가면 갑자기 로그인이 풀리거나 이전에 입력한 데이터가 사라지는 버그가 생기곤 한다. 이는 상태 관리의 스코프를 잘못 이해했을 때 자주 나타난다.

브라우저 개발자 도구로 상태 변화 추적하기

먼저 페이지 이동 전후로 무엇이 달라지는지 확인한다. React DevTools의 Profiler 탭에서 렌더링 흐름을 볼 수 있다.

# 브라우저에서
# 1. React DevTools 열기
# 2. 첫 페이지에서 상태 확인
# 3. 다음 페이지 버튼 클릭
# 4. 상태 변화 확인

Providers, Context, Redux 같은 상태 관리 도구의 상태가 유지되는지 확인한다.

인증 토큰 위치 확인하기

로그인 상태가 풀린다면 인증 토큰이 제대로 저장되고 복원되는지 확인해야 한다.

// 페이지 이동 전후로 토큰 확인
console.log('토큰:', localStorage.getItem('auth_token'));
console.log('사용자:', sessionStorage.getItem('user'));

만약 localStorage에는 있는데 Context가 비어있다면, 컴포넌트가 마운트될 때 토큰을 복원하는 로직이 빠진 것이다. useEffect 또는 초기화 함수에서 복원 코드를 추가해야 한다.

페이지 이동 시 상태 보존하기

React Router를 사용한다면 경로 변경이 상태를 날려버릴 수 있다. 특히 key prop을 잘못 설정했을 때 발생한다.

// 잘못된 예: key가 동적이라 매번 새로 마운트됨
<Route path="/items" key={Math.random()} component={ItemList} />

// 올바른 예
<Route path="/items" component={ItemList} />

이벤트 흐름 확인하기

페이지네이션 버튼 클릭 시 여러 이벤트가 발생한다. 이 중 하나가 로그아웃을 호출할 수도 있다.

// 버튼의 onClick 핸들러
const handleNextPage = async (e) => {
  e.preventDefault(); // 기본 동작 방지
  console.log('다음 페이지로 이동', currentPage + 1);

  // 새 데이터 페칭
  const data = await fetchItems(currentPage + 1);
  setCurrentPage(currentPage + 1);
};

만약 핸들러 내에서 API 호출 실패 시 로그아웃 로직이 있다면, 요청이 실패했을 때 로그인이 풀릴 수 있다.

네트워크 요청 확인

Network 탭에서 API 호출을 확인한다. 인증 헤더가 제대로 포함되는지, 응답 상태가 무엇인지 본다.

요청 헤더: Authorization: Bearer token123
응답 상태: 200 OK
응답 본문: {...데이터}

만약 401 Unauthorized 응답이 오고 있다면, 인증 미들웨어가 요청을 거부하는 것이다. 이 경우 API 서버의 토큰 검증 로직을 확인해야 한다.

로컬 스토리지 Hydration 확인

SSR을 사용하는 경우, 초기 렌더링과 클라이언트 hydration 과정에서 상태가 일치하지 않을 수 있다.

// 초기화 로직
useEffect(() => {
  const savedState = localStorage.getItem('app_state');
  if (savedState) {
    setAppState(JSON.parse(savedState));
  }
}, []); // 마운트 시 한 번만 실행

체크리스트

1. React DevTools에서 상태 변화를 추적한다.
2. localStorage, sessionStorage에서 토큰을 확인한다.
3. 인증 토큰 복원 로직이 useEffect에 있는지 확인한다.
4. 페이지 이동 시 컴포넌트가 새로 마운트되지 않는지 확인한다.
5. Network 탭에서 인증 헤더와 응답 상태를 본다.
6. API 실패 시 로그아웃 로직이 있는지 확인한다.

페이지네이션 문제는 대부분 상태 관리와 인증 흐름을 함께 확인하면 해결된다.