Skip to content
Yeonu Kim edited this page Aug 25, 2024 · 3 revisions

State 관리 방식

여러 state들을 하나의 객체처럼 묶어서 zustand로 관리하고 있습니다.

참고한 자료

https://devhooney.tistory.com/165

⚠️ 원래는 local storage를 사용하지 않기 위해 zustand를 사용하려고 했으나, 결국은 zustand 안에서도 persist를 사용하여 local storage를 사용해야 하는 상황이었습니다. 따라서 나중에 해당 클라이언트 레포지토리를 사용하신다면 기존에 적용된 zustand를 모두 삭제하시는 걸 추천드립니다. (굳이 적용할 필요가 없기 때문..)

⚠️ 전역 state는 많지 않은 것이 좋습니다. state를 여러 상황에서 변경 가능하다면 그만큼 예상치 못한 작동이 발생할 가능성이 높기 때문입니다. 따라서 현재 적용된 전역 state는 모두 useState 등으로 처리하는 것을 강력하게 권장합니다.

⚠️ 만약 zustand를 적용하고 싶다면 react-query에 대해서도 함께 공부해보시기 바랍니다. client state는 주로 zustand가, server state는 주로 react-query가 담당한다고 하니 공부해보시고 적용하시면 좋을 거 같습니다.

https://velog.io/@hyeon9782/우아콘-2023-프론트엔드-상태관리-실전-편-with-React-Query-Zustand

attend

  • userId
  • sessionId
  • attendIdx
  • status
  • attends: 시간별 출석 내역을 저장합니다.

listData

리스트 형식으로 저장되는 데이터를 관리합니다.

  • data
  • loading
  • error

적용하려고 했으나 적용하지 않았던 state들

User state를 제외한 나머지 state는 크게 필요하지 않아 보입니다. 확인 후 제거하시는 것을 추천합니다.

User

  • userId
  • username
  • password
  • email
  • isAdmin
  • token: reload 시 초기화되지 않도록 web storage에 저장해야 합니다. 현재는 session storage에 저장하고 있습니다.

session

  • sessionId
  • sessionName
  • date