[TIL] 20240531 - bookstore(3)

상태 관리 라이브러리

---

🧊 zustand

Install

npm install zustand

store 생성

create 함수를 이용해 store 생성

• 상태 변수와 해당 상태를 업데이트하는 함수로 구성

import { create } from "zustand";

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

useAuthStore 함수 호출

import { useAuthStore } from "../store/authStore";

function Login() {
  const { isloggedIn, storeLogin, storeLogout } = useAuthStore();

  const onSubmit = (data: SignupProps) => {
    login(data).then((res) => {
      storeLogin(res.token);
      showAlert("로그인에 성공했습니다.");
    }, (error) => {
      showAlert("로그인이 실패했습니다.");
    });
  };
  
  ...
};

query string

---

🧊 query string

쿼리 스트링은 문자열의 형태를 띄며 key=value로 표현

http://localhost:4000/products?category_id=1

react-router-dom에서 쿼리 스트링 값을 가져올 수 있는 hook

• useLocation
• useSearchParams

Install

npm install react-router-dom

🧊 useLocation

현재의 URL 경로에 대한 객체를 반환

Import

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

useLocation

const location = useLocation();

useEffect(() => {
    const params = new URLSearchParams(location.search);
    ...
  }, [location.search]);

key 값

pathname : 현재 URL의 경로 부분

search : 현재 URL의 query parameter

hash : 현재 URL의 해시 부분

state : 라우팅된 컴포넌트로 전달되는 상태 객체

key : 라우팅된 위치의 고유한 식별자

🧊 useSearchParams

Import

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

useSearchParams

const [serchParams, setSearchParams] = useSearchParams();

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

  if (newSearchParams.get(QUERYSTRING.NEWS)) {
    newSearchParams.delete(QUERYSTRING.NEWS);
  } else {
    newSearchParams.set(QUERYSTRING.NEWS, "true");
  }

  setSearchParams(newSearchParams);
};

method

searchParams.get(key) : 특정 key의 value를 반환(여러개라면 가장 먼저 나온 value만 리턴)

searchParams.getAll(key) : 특정 key에 해당하는 모든 vlaue를 반환

searchParams.toString() : query string을 string 형태로 리턴

searchParams.set(key, value) : key 값을 value로 설정

searchParams.append(key, value) : 새로운 값을 추가