[7장] 여러분의 상태 위치 결정 기준은 무엇인가요?

[kimfield98]

🧐 Question

실제 프로젝트에서 사용하는 규칙이나 기준이 있다면 공유해주세요!

예시

1. 사용자 인증 정보
2. 모달의 열림/닫힘 상태
3. 폼 입력 값들
4. 페이지네이션 상태
5. 필터링/정렬 조건들
6. 테마(다크모드 등) 설정

추가로, Context만으로 충분한지 Redux나 여타 전역상태관리 라이브러리를 사용하게 된 명확한 이유가 있는지에 대한 사례가 있다면 듣고 싶어요!

(저도 좀 더 찾아보고 댓글로 공유해볼게요 😄 )

[horang-e]

저는 제일 많이 사용하는 상태관리 서비스(?)는 유저 프로필 상태 관리를 가장 많이 사용합니다. 로그인한 시점에 토큰값을 가지고 프로필을 불러와 사용합니다. 프로필은 여기저기 엄청 많이 사용하는 편이라 따로 만들어 사용했었구욧

import { create } from "zustand";
import { jwtDecode } from "jwt-decode";
import { getUserData } from "../../api/user";
import { User } from "../../types";

type Store = {
  userData?: User;
  setUser: (accessToken?: string) => void;
};

export const userStore = create<Store>()((set) => ({
  setUser: async (accessToken?: string) => {
    if (!accessToken) {
      set({ userData: undefined });
      return;
    }
    try {
      const decoded_jwt = jwtDecode<{ user_id: number }>(accessToken);
      const userData = await getUserData(decoded_jwt.user_id);
      set({ userData: userData });
    } catch (error) {
      console.error("Error fetching user data:", error);
      set({ userData: undefined });
    }
  },
}));

요거는 제가했던 대부분의 프로젝트에서 공통으로 사용하는것 같아 가져와봤습니다!

[chhw130]

저는 사실 클라이언트측에서 관리할 상태관리가 많은 상황에서 필요한 경우가 없어서, 대부분의 경우에 상태관리 라이브러리를 사용하고 있지않습니다.

다만 예시로 적어주신 모달이나 페이지네이션 같은 상태값들은 실제로 어느 정도 상태 관리가 필요하지만, UI라이브러리를 사용하고 있어서 크게 생각하지 못한거 같아요...ㅋㅋ

context같은 경우 react에서 내장되어 있고 compound pattern을 구현할 때 많이 사용해봤습니다! compound pattern

[jasongoose]

실제 프로젝트에서 사용하는 규칙이나 기준이 있다면 공유해주세요!

대부분의 상태는 지역 스코프에서 관리하는 걸 지향하고 있습니다~

A 페이지에서 B 페이지로 이동하면서 데이터를 전달하는 걸 store를 통해 공유하는 방식으로 구현하고 있습니다!

[Joie-Kim]

저도 유저 정보에 대해서 스토어를 사용해 전역적으로 상태관리를 했고, 그 외에 저희 프로젝트에서는 소켓이 사용되어서 소켓 연결과 관련된 부분을 소켓으로 관리하고 있습니다. (중복 연결 방지를 위해..)

[kimfield98]

아하 또 설문조사 패턴을 구현할 때 step과 flag 정도를 전역적으로 관리하고 있어요!