[TIL] 개인 : MBTI 테스트 페이지1

MBTI 검사 페이지 만들기

개인 MBTI 검사 페이지 만들기 시작!

사용할 스택

...아마도?

회원가입/로그인 기능

메인

로그인

회원가입

트러블 슈팅

원본 코드

import { create } from 'zustand';

const useAuthStore = create((set) => ({
  accessToken: null,
  nickname: null,
  userId: null,

  // 사용자 정보를 저장하는 함수
  setAuth: (token, nickname, userId) => {
    set({ accessToken: token, nickname: nickname, userId: userId });
    localStorage.getItem('accessToken');
    localStorage.getItem('nickname');
  },

  // 로그아웃 함수 (모든 정보를 초기화)
  clearAuth: () => {
    set({ accessToken: null, nickname: null, userId: null });
    localStorage.removeItem('accessToken');
    localStorage.removeItem('nickname');
  }
}));

export default useAuthStore;

로그인 시 새로고침을 하면 로그인이 풀리는 이슈가 발생하였다!!!!
처음부터 주스탄드로 하려고 한 오만인 것.. 같다.
일단, 사용자 저장 함수에 getItem을 써버린 것이 아마 졸면서 코딩을 했나보다.

일단 setAuth 함수에서 localStorage에 데이터를 저장하고 초기 상태에서 localStorage에에 저장된 데이터를 불러오려면 초기화 시점에서 데이터를 가져와 상태를 업데이트 해야한다.

그리고 객체 데이터를 저장할 때는 JSON.stringify()로 문자열로 변환하고, 가져올 때는 JSON.parse()로 다시 객체로 변환 필수!

1차 수정 완
하지만, 사용자 정보를 localStorage.setItem()를 통해 저장해야 한다.

초기 상태에 해당 값이 없을 경우 null 이 기본값이어서 사용자 정보를 저장하는 함수에서 사용자 정보를 저장하고, 그 다음에 초기 상태에서 값을 불러온다!

데이터 객체 가져올 때 예시 : localStorage.setItem('user',JSON.stringify(user));

import { create } from 'zustand';

const useAuthStore = create((set) => ({
  // 초기값을 localStorage에서 가져옴
  accessToken: localStorage.getItem('accessToken') || null,
  nickname: localStorage.getItem('nickname') || null,
  userId: null,

  // 사용자 정보를 저장하는 함수
  setAuth: (token, nickname, userId) => {
    set({ accessToken: token, nickname: nickname, userId: userId });
    localStorage.getItem('accessToken');
    localStorage.getItem('nickname');
  },
  // 로그아웃 함수 (모든 정보를 초기화)
  clearAuth: () => {
    set({ accessToken: null, nickname: null, userId: null });
    localStorage.removeItem('accessToken');
    localStorage.removeItem('nickname');
  }
}));
export default useAuthStore;

이렇게 수정하는 것으로 한 건 해결..

아 맞다! 쥬스탄드는

import { create } from 'zustand';

// 스토어 정의
const useStore = create((set) => ({
  count: 0, // 상태값
  increase: () => set((state) => ({ count: state.count + 1 })), // 상태 업데이트 함수
  decrease: () => set((state) => ({ count: state.count - 1 })), 
}));

함수를 정의할 때 create로 set인자를 받아 상태값, 상태 업데이트 함수 형식으로 사용하니 꼭 유념해야 한다.
state 함수를 줄일 수 있다

import { create } from 'zustand';

// 스토어 정의
const useStore = create((set) => ({
  count: 0, // 상태값
  increase: () => set((state) => ({ count: state.count + 1 })), // 상태 업데이트 함수
  decrease: () => set((state) => ({ count: state.count - 1 })), 
}));

스토어에서 가져올 때는 저렇게 구조분해 할당을 통해 가져오는 것이 일반적이다.

물론 나는 처음에 이렇게 작업해 버려서 ㅠㅠㅠㅠ

const setAuth = useAuthStore((state) => state.setAuth);

const { setAuth } = useAuthStore();

아마 이렇게 수정 할 계획이다..

회고

문제는 일단락 되었지만.. 앞으로 많은 문제가 남아있을 것 같은 느낌이 너무나 든다.

처음에는 세션부분에 다 저장을 하고 싶었지만, 아쉽게도 너무 실패 투성이어서 로컬스토리지로 전향.

틀린 부분이 있으면 많은 지적 부탁드립니다!