유저 정보를 Zustand로 관리하는 방법

1. Zustand 설치

npm install zustand

2. 유저 정보 관리하는 Zustand 스토어 만들기

Zustand 스토어는 상태를 관리하는 곳

import { create } from 'zustand';

// 1. 유저 정보와 관련된 상태를 관리할 스토어를 만드세요.
const useUserStore = create((set) => ({
  user: null, // 초기 유저 정보는 null로 설정
  setUser: (userInfo) => set({ user: userInfo }), // 유저 정보를 업데이트하는 함수
  clearUser: () => set({ user: null }), // 유저 정보를 초기화하는 함수
}));

export default useUserStore;

• user: 유저 정보를 담는 상태. 처음에는 아무 유저 정보도 없기 때문에 null.
• setUser: 유저 정보를 업데이트.
• clearUser: 유저 정보를 지우는 함수. 유저가 로그아웃할 때 이 함수로 유저 정보를 초기화 가능

3. 컴포넌트에서 Zustand 스토어 사용하기

import React from 'react';
import useUserStore from './store'; // Zustand 스토어 불러오기

const UserProfile = () => {
  const { user, setUser, clearUser } = useUserStore(); // Zustand에서 유저 상태와 함수를 가져오기

  // 1. 유저가 없으면 로그인 버튼을 보여줍니다.
  if (!user) {
    return (
      <div>
        <p>로그인이 필요합니다.</p>
        <button onClick={() => setUser({ name: "홍길동", age: 15 })}>
          로그인
        </button>
      </div>
    );
  }

  // 2. 유저가 있으면 유저 정보를 보여주고 로그아웃 버튼을 보여줍니다.
  return (
    <div>
      <p>안녕하세요, {user.name}님!</p>
      <button onClick={clearUser}>로그아웃</button>
    </div>
  );
};

export default UserProfile;

설명:

• 유저 정보 표시: user 상태가 null이면 유저가 로그인하지 않은 상태이기 때문에 "로그인이 필요합니다" 메시지와 함께 로그인 버튼을 보여줌.
• 로그인: setUser 함수를 호출해서 유저 정보를 설정 가능. 예를 들어, "홍길동"이라는 이름과 15살이라는 정보를 로그인 버튼을 클릭했을 때 설정 가능.
• 로그아웃: 유저가 로그아웃하면 clearUser 함수를 호출해서 유저 정보를 null로 초기화.

4. 유저 정보 활용하기

import React from 'react';
import useUserStore from './store'; // Zustand 스토어 불러오기

const Header = () => {
  const { user } = useUserStore(); // 유저 정보를 불러오기

  return (
    <header>
      {user ? (
        <p>반가워요, {user.name}님!</p>
      ) : (
        <p>로그인해주세요.</p>
      )}
    </header>
  );
};

export default Header;

---

요약:

1. Zustand를 설치
2. 스토어에서 유저 정보를 상태로 관리
3. 컴포넌트에서 상태를 가져와서 유저 정보 사용 가능