[Week12] React(TypeScript) 기반의 동적 UI 개발(4)

지난 시간에 이어 북스토어 프로젝트를 계속 진행해 볼게요. 이번 시간에는 전역 상태 관리를 통한 로그인 구현과 메인 화면의 도서 목록 화면을 만드는 과정을 정리해 볼게요.

전역 상태 관리 (Zustand)

Zustand는 Redux와 같은 전역 상태 관리 도구예요. Redux와 목적은 같지만 사용 방법이 훨씬 간결하다는 특징이 있어요. 이번 프로젝트에서는 localStorage 와 Zustand를 함께 활용하여 로그인 토큰을 저장하고, 해당 토큰의 존재 여부에 따라 로그인 상태를 관리해요.

HTTP Authorization 설정

Axios를 활용해 서버와 연결하는 과정에서, 백엔드와 협의하여 HTTP 헤더의 Authorization 속성에 토큰 값을 넘겨주도록 설정했어요.

import axios, { AxiosRequestConfig } from "axios";

const axiosInstance = axios.create({
  baseURL: BASE_URL,
  timeout: DEFAULT_TIMEOUT,
  headers: {
    "content-type": "application/json",
    Authorization: getToken() ? getToken() : "",
  },
  withCredentials: true,
  ...config,
});

에러 핸들링 (Error Handling)

Axios의 인터셉터(Interceptor) 기능을 사용하면 API 요청이 성공했을 때와 실패했을 때의 공통 동작을 제어할 수 있어요. 로그인에 실패하거나 권한이 부족하여 서버에서 상태 코드 401을 응답하는 경우, 토큰을 삭제하고 로그인 화면으로 이동하도록 구현했어요.

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      removeToken();
      window.location.href = "/login";
      return;
    }
    return Promise.reject(error);
  }
);

쿼리 스트링 활용하기

쿼리 스트링을 이용하면 상태 공유, 재사용성 보장, 검색엔진 최적화(SEO), 데이터 분석 등의 장점을 얻을 수 있어요. 리액트 환경에서 쿼리 스트링을 다루기 위해 다음과 같은 방법들을 사용해요.

• URLSearchParams : URL의 쿼리 스트링을 조작할 수 있는 내장 유틸리티 객체예요.
• useLocation() : react-router-dom 에서 제공하는 훅으로, 현재 URL의 경로와 쿼리 스트링 정보를 확인할 수 있어요.

import { useLocation } from "react-router-dom";

const location = useLocation();
console.log(location);
// 제공되는 정보: { pathname: '/books', search: '?view=grid', hash: '', state: null, key: 'bgg7nl48' }

• useSearchParams() : URLSearchParams 를 리액트의 상태처럼 사용할 수 있도록 만들어진 커스텀 훅이에요. 이 훅을 활용하면 쿼리 스트링을 쉽게 조작하고 상태를 업데이트할 수 있어요.

import { useSearchParams } from "react-router-dom";

const[searchParams, setSearchParams] = useSearchParams();

const handleSwitch = (value: ViewMode) => {
  const newSearchParams = new URLSearchParams(searchParams);

  newSearchParams.set(QUERYSTRING.VIEW, value);
  setSearchParams(newSearchParams);
};

실제 서버 API가 아직 준비되지 않은 상황이라면 더미 데이터를 활용해 프론트엔드 작업을 끊김 없이 진행할 수 있어요. 또한 쿼리 스트링의 키값과 같은 상수를 따로 모아서 관리하면, 자주 사용되는 값을 한 번의 수정으로 일괄 적용할 수 있어 유지보수가 훨씬 쉬워져요.

타입스크립트 Pick 유틸리티 타입

타입스크립트에서 제공하는 유틸리티 타입 중 Pick 은 기존 인터페이스에서 원하는 속성과 타입만 골라내어 새로운 타입을 만들 때 사용해요.

interface User {
  id: number;
  email: string;
  age: number;
}

// User 타입에서 id와 email만 추출하여 새로운 타입 생성
type UserPreview = Pick<User, "id" | "email">;