🎯 Zustand를 통해 전역상태를 관리하고 로그인 페이지와 도서 목록 페이지를 제작합니다.

📗 Today I Learned

로그인과 전역 상태

로그인 로직

                     [로그인 성공]
                          ↓
                      [토큰 획득]
                          ↓
      ┌─────────────────────────────────────────────┐
      ↓                                         ↓
  [전역 상태]                                 [토큰 저장]     
isLoggedIn:true                            localStorage         
  (Zustand)                                     ↑
                                        [http client 설정]
                                 headers.Authorization에 토큰 포함

로그인에 성공하면 토큰🔑이 발행되고, 두 곳에 쓰이게 됩니다.

• 하나는, 전역 상태에 저장하여 로그인 여부를 관리합니다.

• 나머지는, localStorage에 저장하여 새로고침을 해도 로그인 상태를 유지하게 합니다.

---

Zustand

React 상태 관리를 간단하고 직관적으로 해주는 라이브러리입니다. Redux처럼 복잡한 설정 없이 전역 상태를 만들고 관리할 수 있습니다.

설치 방법

npm install zustand

예제 코드

import { create } from 'zustand';

interface StoreState {
  isLoggedIn: boolean;
  storeLogin: (token: string) => void;
  storeLogout: () => void;
}

const getToken = () => {
  const token = localStorage.getItem('token');
  return token;
};

const setToken = (token: string) => {
  localStorage.setItem('token', token);
};

const removeToken = () => {
  localStorage.removeItem('token');
};

export const useAuthStore = create<StoreState>((set) => ({
  isLoggedIn: getToken() ? true : false,
  storeLogin: (token: string) => {
    set({ isLoggedIn: true });
    setToken(token);
  },
  storeLogout: () => {
    set({ isLoggedIn: false });
    removeToken();
  },
}));

• useAuthStore : 로그인 상태를 전역으로 관리하는 커스텀 훅입니다.

  • create((set) => ({...}) : store(상태 저장소)를 만드는 함수이며, set을 통해 상태를 변경합니다.

    • isLoggedIn : 로그인 상태를 저장합니다. (true or false)

    • storeLogin : 토큰을 저장하고, 로그인 상태로 변경합니다.

    • storeLogout : 토큰을 삭제하고, 로그아웃 상태로 변경합니다.

---

도서 목록 페이지

도서 페이지 컴포넌트 구조

<Books />
├── <BookFilter />        ← 카테고리 필터
├── <BooksViewSwitcher /> ← 책 뷰 필터 (그리드, 리스트)
├── <BookList />          ← 도서 목록 
│   ├── <BookItem />      ← 개별 도서 아이템 1
│   ├── <BookItem />      ← 개별 도서 아이템 2
│   └── <BookItem />      ← 개별 도서 아이템 3
│             ⁝
├── <BookEmpty />         ← 책이 없을 때 보여주는 UI (조건부 렌더링)
└── <Pagination />        ← 페이지네이션 컨트롤러 (다음/이전 페이지 이동)

BookFilter

쿼리스트링(QS) 업데이트

┌─────────────────────┐       각 필드 변경 → QS 요청
│  <BooksFilter />  │──────────────────────────┐
└─────────────────────┘                        │
                                             ▼
      ┌─────────────────────────────────────────────────────┐
      │                  /books                         │
      │    ?category_id=0 & news=true & view=grid       │
      └─────────────────────────────────────────────────────┘
                                              │
                                              ▼
                   ┌────────────────────────────────────┐
                   │              useBooks           │
                   │  ┌──────────────────────────────┐  │
                   │  │ 1. QS 변경 감지             │  │
                   │  │ 2. fetch 호출              │  │
                   │  │ 3. books 상태 갱신          │  │
                   │  └──────────────────────────────┘  │
                   └────────────────────────────────────┘
                                               │
                                               ▼
                   ┌────────────────────────────────────┐
                   │              <Books />          │
                   │  ┌──────────────────────────────┐  │
                   │  │  화면 상태 갱신              │  │
                   │  └──────────────────────────────┘  │
                   └────────────────────────────────────┘

예시 코드

import styled from 'styled-components';
import { useCategory } from '../../hooks/useCategory';
import Button from '../common/Button';
import { useSearchParams } from 'react-router-dom';

export default function BooksFilter() {
  const { category } = useCategory();
  const [searchParams, setSearchParams] = useSearchParams();
  
  const handleCategory = (id: number | null) => {
    const newSearchParams = new URLSearchParams(searchParams);

    if (id === null) {
      newSearchParams.delete('category_id');
    } else {
      newSearchParams.set('category_id', id.toString());
    }
    setSearchParams(newSearchParams);
  };

  const handleNews = () => {
    const newSearchParams = new URLSearchParams(searchParams);

    if (newSearchParams.get('news')) {
      newSearchParams.delete('news');
    } else {
      newSearchParams.set('news', 'true');
    }
    setSearchParams(newSearchParams);
  };

  return (
    <StyledBooksFilter>
      <div className='category'>
        {category.map((item) => (
          <Button
            size='medium'
            scheme={item.isActive ? 'primary' : 'normal'}
            key={item.id}
            onClick={() => handleCategory(item.id)}
          >
            {item.name}
          </Button>
        ))}
      </div>
      <div className='new'>
        <Button
          size='medium'
          scheme={searchParams.get('news') ? 'primary' : 'normal'}
          onClick={handleNews}
        >
          신간
        </Button>
      </div>
    </StyledBooksFilter>
  );
}

const StyledBooksFilter = styled.div`
  display: flex;
  gap: 24px;

  .category {
    display: flex;
    gap: 8px;
  }
`;

• handleCategory : 카테고리 버튼을 누르면, 현재 URL의 검색 파라미터를 기반으로 새로운 URLSearchParams 객체를 생성합니다..

  • id가 null이면 category_id를 제거합니다.

  • 그렇지 않으면 id를 문자열로 바꿔서 category_id에 설정합니다.

  => 최종적으로 변경된 쿼리 파라미터를 반영(setSearchParams)시킵니다.

• handleNews : 신간 버튼을 누르면, 현재 URL의 검색 파라미터를 기반으로 새로운 URLSearchParams 객체를 생성합니다.

  • news 파라미터가 있으면 제거하고, 없으면 true로 설정합니다.

  => 최종적으로 변경된 쿼리 파라미터를 반영(setSearchParams)시킵니다.

• return : category 배열을 돌면서 각각의 카테고리를 버튼으로 렌더링합니다.

  • 해당 카테고리가 isActive일 경우 primary 스타일을 적용합니다.

  • 버튼 클릭 시 해당 카테고리 id로 필터링합니다.

BooksViewSwitcher

import styled from 'styled-components';
import Button from '../common/Button';
import { FaList, FaTh } from 'react-icons/fa';
import { useSearchParams } from 'react-router-dom';
import { QUERYSTRING } from '../../constants/querystring';
import { useEffect } from 'react';

const viewOptions = [
  {
    value: 'list',
    icon: <FaList />,
  },
  {
    value: 'grid',
    icon: <FaTh />,
  },
];

export type ViewMode = 'grid' | 'list';

export default function BooksViewSwitcher() {
  const [searchParams, setSearchParams] = useSearchParams();

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

    newSearchParams.set(QUERYSTRING.VIEW, value);

    setSearchParams(newSearchParams);
  };

  useEffect(() => {
    if (!searchParams.get(QUERYSTRING.VIEW)) {
      handleSwitch('grid');
    }
  }, []);

  return (
    <StyledBooksViewSwitcher>
      {viewOptions.map((option) => (
        <Button
          key={option.value}
          size='medium'
          scheme={
            searchParams.get(QUERYSTRING.VIEW) === option.value
              ? 'primary'
              : 'normal'
          }
          onClick={() => handleSwitch(option.value)}
        >
          {option.icon}
        </Button>
      ))}
    </StyledBooksViewSwitcher>
  );
}

const StyledBooksViewSwitcher = styled.div`
  display: flex;
  gap: 8px;
  svg {
    fill: #fff;
  }
`;

• viewOptions : 리스트형 보기와 그리드형 보기에 대한 옵션 배열입니다.

• handleSwitch : 아이콘을 클릭했을 때 호출되어 URL의 view 쿼리 파라미터를 갱신합니다.

  • 현재 URL의 검색 파라미터를 기반으로 새로운 URLSearchParams 객체를 생성합니다.

  • 해당 보기 방식(grid , list)을 쿼리 파라미터에 추가합니다.

  => 최종적으로 변경된 쿼리 파라미터를 반영(setSearchParams)시킵니다.

• useEffect : 처음 페이지가 렌딩될 때 쿼리스트링에 view가 없다면, grid를 기본값으로 설정합니다.

BookList

import styled from 'styled-components';
import BookItem from './BookItem';
import { Book } from '../../models/book.model';
import { useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { QUERYSTRING } from '../../constants/querystring';
import { ViewMode } from './BooksViewSwitcher';

interface Props {
  books: Book[];
}

export default function BooksList({ books }: Props) {
  const [view, setView] = useState<ViewMode>('grid');
  const location = useLocation();

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    if (params.get(QUERYSTRING.VIEW)) {
      setView(params.get(QUERYSTRING.VIEW) as ViewMode);
    }
  }, [location.search]);

  return (
    <StyledBooksList view={view}>
      {books.map((item) => (
        <BookItem key={item.id} book={item} view={view} />
      ))}
    </StyledBooksList>
  );
}

interface BooksListStyleProps {
  view: ViewMode;
}

const StyledBooksList = styled.div<BooksListStyleProps>`
  display: grid;
  grid-template-columns: ${({ view }) =>
    view === 'grid' ? 'repeat(4, 1fr)' : 'repeat(1, 1fr)'};
  gap: 24px;
`;

• useState<ViewMode>('grid') : 기본값을 grid로 해서 뷰 모드 상태를 선언합니다.

• useLocation() : react-router-dom의 훅으로 현재 페이지의 URL의 정보를 가져옵니다.

🔍 useLocation() 더 알아보기

URL : http://localhost:3000/books?view=grid

• hash: URL의 해시(#) 부분
• key: URL 상태의 고유 값 (location의 상태 변경을 추적)
• pathname: 현재 경로
• search: URL의 쿼리 문자열
• state : 상태값 (여기서는 설정되지 않음)

---

🤔 useSearchParams()와 useLocation() 의 차이는 뭘까?

▪️ useSearchParams → searchParams.get('key') / setSearchParams(...)
→ 쿼리스트링을 직접 조작하고 싶을 때

▪️ useLocation → location.pathname, location.search, location.hash
→ 현재 URL 정보를 읽기만 하고 싶을 때

• useEffect : location.search(쿼리스트링)이 바뀔 때마다 실행되는 함수로 URL에서 view 쿼리값이 있는지 확인하고, 있으면 그 값을 현재 상태로 설정합니다.

• return : books 배열을 순회하며 BookItem을 하나씩 출력하고, 각 책 정보(book)와 현재 뷰(view)를 전달합니다.

BookItem

import styled from 'styled-components';
import { Book } from '../../models/book.model';
import { getImgSrc } from '../../utils/image';
import { formatNumber } from '../../utils/format';
import { FaHeart } from 'react-icons/fa';
import { Theme } from '../../style/theme';
import { ViewMode } from './BooksViewSwitcher';

interface Props {
  book: Book;
  view?: ViewMode;
}

export default function BookItem({ book, view }: Props) {
  return (
    <StyledBookItem view={view}>
      <div className='img'>
        <img src={getImgSrc(book.img)} alt={book.title} />
      </div>
      <div className='content'>
        <h2 className='title'>{book.title}</h2>
        <p className='summary'>{book.summary}</p>
        <p className='author'>{book.author}</p>
        <p className='price'>{formatNumber(book.price)}원</p>
        <div className='likes'>
          <FaHeart />
          <span>{book.likes}</span>
        </div>
      </div>
    </StyledBookItem>
  );
}

const StyledBookItem = styled.div<Pick<Props, 'view'>>`
  display: flex;
  flex-direction: ${({ view }) => (view === 'grid' ? 'column' : 'row')};
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  .img {
    border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
    overflow: hidden;
    width: ${({ view }) => (view === 'grid' ? 'auto' : '160px')};
    img {
      max-width: 100%;
    }
  }

  .content {
    padding: 16px;
    position: relative;
    flex: ${({ view }) => (view === 'grid' ? 0 : 1)};

    .title {
      font-size: 1.25rem;
      font-weight: 700;
      margin: 0 0 12px 0;
    }
    .summary {
      font-size: 0.875rem;
      color: ${({ theme }) => (theme as Theme).color.background};
      margin: 0 0 4px 0;
    }
    .author {
      font-size: 0.875rem;
      color: ${({ theme }) => (theme as Theme).color.background};
      margin: 0 0 4px 0;
    }
    .price {
      font-size: 1rem;
      color: ${({ theme }) => (theme as Theme).color.background};
      margin: 0 0 4px 0;
      font-weight: 700;
    }
    .likes {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.875rem;
      color: ${({ theme }) => (theme as Theme).color.primary};
      margin: 0 0 4px 0;
      font-weight: 700;
      border: 1px solid ${({ theme }) => (theme as Theme).color.border};
      border-radius: ${({ theme }) => (theme as Theme).borderRadius.default};
      padding: 4px 12px;
      position: absolute;
      bottom: 16px;
      right: 16px;

      svg {
        color: ${({ theme }) => (theme as Theme).color.primary};
      }
    }
  }
`;

• Props : book은 책의 데이터를 담고 있으며, view는 선택적 프로퍼티로 보기 모드를 나타냅니다.

• book 객체의 여러 속성값을 기반으로 책의 정보를 화면에 표시합니다.

BookEmpty

import { FaSmileWink } from 'react-icons/fa';
import styled from 'styled-components';
import Title from '../common/Title';
import { Link } from 'react-router-dom';

export default function BooksEmpty() {
  return (
    <StyledBooksEmpty>
      <div className='icon'>
        <FaSmileWink />
      </div>
      <Title size='large' color='secondary'>
        검색 결과가 없습니다.
      </Title>
      <p>
        <Link to='/books'>전체 검색 결과로 이동</Link>
      </p>
    </StyledBooksEmpty>
  );
}

const StyledBooksEmpty = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 120px 0;

  .icon {
    svg {
      font-size: 4rem;
      fill: #ccc;
    }
  }
`;

• Link : '/books' 페이지로 이동하는 링크를 표시합니다.

Pagination

import styled from 'styled-components';
import { Pagination as IPagination } from '../../models/pagination.model';
import { LIMIT } from '../../constants/pagination';
import Button from '../common/Button';
import { useSearchParams } from 'react-router-dom';
import { QUERYSTRING } from '../../constants/querystring';

interface Props {
  pagination: IPagination;
}

export default function Pagination({ pagination }: Props) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { totalCount, currentPage } = pagination;
  const pages: number = Math.ceil(totalCount / LIMIT);

  const handleClickPage = (page: number) => {
    const newSearchParams = new URLSearchParams(searchParams);

    newSearchParams.set(QUERYSTRING.PAGE, page.toString());

    setSearchParams(newSearchParams);
  };

  return (
    <StyledPagination>
      {pages > 0 && (
        <ol>
          {Array(pages)
            .fill(0)
            .map((_, index) => (
              <li>
                <Button
                  key={index}
                  size='small'
                  scheme={index + 1 === currentPage ? 'primary' : 'normal'}
                  onClick={() => handleClickPage(index + 1)}
                >
                  {index + 1}
                </Button>
              </li>
            ))}
        </ol>
      )}
    </StyledPagination>
  );
}

const StyledPagination = styled.div`
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 24px 0;

  ol {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
  }
`;

• Props : IPagination 타입으로 지정하여 변수가 헷갈리지 않게 합니다.

• handleClickPage : 페이지 번호를 클릭했을 때 호출되어 URL의 page 쿼리 파라미터를 갱신합니다.

  • 현재 URL의 검색 파라미터를 기반으로 새로운 URLSearchParams 객체를 생성합니다.

  • 페이지 번호를 쿼리 파라미터에 추가합니다.

  => 최종적으로 변경된 쿼리 파라미터를 반영(setSearchParams)시킵니다.

---

도서 목록 페이지 결과 화면

---

✏️ 회고

전역 상태를 관리하는 라이브러리가 많지만, zustand가 익숙치 않다는 것 말고는 사용하기엔 훨씬 편한 것 같다. 도서 페이지를 만들면서 컴포넌트로 나누고, 하나하나씩 연결시키면서 생각하는 게 아직은 힘들고, 타입 지정하는 것에 더 익숙해져야 할 것 같다.