왜 이렇게 고쳤는가?

• 효율적인 토큰 관리: 토큰을 처리하는 방식을 클래스로 구조화하여 효율적인 토큰 관리를 가능하게 합니다.
• 재사용성: RouterGuard 컴포넌트를 도입하여 다양한 경로에서 재사용 가능한 인증 로직을 구현합니다.
• 사용자 경험 향상: 인증 실패 시 사용자에게 적절한 경고 메시지를 제공함으로써 사용자 경험을 향상시킵니다.

작성 코드 및 설명

TokenStorage 클래스

토큰 관리를 위한 클래스로, 로컬 스토리지에서 토큰을 쉽게 가져오고 설정할 수 있도록 메서드를 제공합니다.

class TokenStorage {
  getToken() {
    return localStorage.getItem('token');
  }
  // ... Other methods for token management
}
const tokenStorage = new TokenStorage();

RouterGuard 컴포넌트

이 컴포넌트는 각 경로에 대해 사용자의 로그인 상태를 확인하고, 만료된 토큰이나 유효하지 않은 토큰의 경우 경고를 표시합니다.

export default function RouterGuard() {
  const url = useLocation().pathname;
  const navigate = useNavigate();

  useEffect(() => {
    const loginInfo = tokenStorage.getToken();
    if (loginInfo) {
      const parsedLoginInfo = JSON.parse(loginInfo);
      const expire = parsedLoginInfo.expire;
      // 로직 처리 예: 토큰 만료 확인
    }
    // ... Other authentication logic
  }, [url]); // URL 변경 시 검사

  return <Outlet />; // 자식 컴포넌트 렌더링
}

결론

RouterGuard 컴포넌트와 TokenStorage 클래스를 도입함으로써, React 앱에서의 인증 로직을 효과적으로 관리할 수 있게 되었습니다. 이러한 접근은 코드의 재사용성을 높이고, 유지보수를 용이하게 하며, 안정적인 인증 처리를 가능하게 합니다. 이와 같은 패턴은 대형 프로젝트에서 중요한 보안 요소를 관리하는 데 있어 귀중한 실천 사례를 제공할 수 있습니다.