✨ feat: zustand 적용

[rkdcodus]

✅ 체크리스트

• [x] User store/ useUser 훅 생성
• [x] Profile store/ useProfile 훅 생성
• [x] 생성한 store 및 훅 적용
• [x] suspense 태그 제거

📝 작업 상세 내용

1️⃣ auth store 수정

• AuthUtile 함수의 handleCheckAuth -> authStore 내부로 이동
• store를 export 하지 않고 커스텀 훅 생성해 export 하기 전체 store를 구독하게 되면 불필요한 렌더링이 일어날 수 있습니다.

2️⃣ user store 생성

user state

const useUserStore = create<UserState>(set => ({
  memberId: 0,
  setMemberId: memberId => set({ memberId }),
}));

export const useMemberId = () => useUserStore(state => state.memberId);
export const useSetMemberId = () => useUserStore(state => state.setMemberId);

• memberId와 setMemberId를 state로 가지고 있습니다.

useUser 훅

export const useUser = (): Id => {
  const { isAuthenticated } = useAuth();
  const memberId = useMemberId();
  const setMemberId = useSetMemberId();

  const { data, isSuccess, isError } = useQuery<
    number,
    Error,
    number,
    string[]
  >({
    queryKey: ['memberId'],
    queryFn: fetchAxios,
    enabled: !!isAuthenticated,
  });

  useEffect(() => {
    if (!isAuthenticated) setMemberId(0);
    else if (isError) setMemberId(0);
    else if (isSuccess) setMemberId(data);
  }, [isAuthenticated, isError, isSuccess]);

  return memberId;
};

• useUser 훅을 사용하게 되면 fetch 를 통해 memberId 값이 업데이트 됩니다.
• 로그인 인증이 되었고 (로컬스토리지에 토큰이 있고) 에러가 나지 않는다면 업데이트 합니다.
• setter 부분은 useEffeact 내부에 적지 않았더니 "Cannot update a component (Header) while rendering a different component (Header)" 에러가 발생하였습니다. useEffect 내부에 적지 않고 useUser 훅의 바디에서 직접 setMemberId를 호출하게되면 렌더링이 진행되는 도중에 상태 업데이트가 발생하게 되어 에러가 발생됩니다.
• useEffect는 컴포넌트 렌더링이 완료된 후에 실행됩니다.

3️⃣ profile store 생성

profile state

const useProfileStore = create<ProfileState>(set => ({
  profileImageURL: '',
  nickname: '',
  profileIntro: '',
  actions: {
    setProfileImageURL: profileImageURL => set({ profileImageURL }),
    setNickName: nickname => set({ nickname }),
    setProfileIntro: profileIntro => set({ profileIntro }),
  },
}));

export const useProfileImageURL = () => useProfileStore(state => state.profileImageURL);
export const useNickname = () => useProfileStore(state => state.nickname);
export const useProfileIntro = () => useProfileStore(state => state.profileIntro);
export const useProfileActions = () => useProfileStore(state => state.actions);

• profileImageURL, nickname, profileIntro 와 setter들을 state로 가지고 있습니다.

useProfile 훅

export const useProfile = () => {
  const memberId = useUser();
  const { setProfileImageURL, setNickName, setProfileIntro } = useProfileActions();
  const profileImageURL = useProfileImageURL();
  const nickname = useNickname();
  const profileIntro = useProfileIntro();

  const { data, isSuccess, isError, error } = useQuery({
    queryKey: ['profile'],
    queryFn: () => fetchAxios(memberId),
    enabled: !!memberId,
  });

  useEffect(() => {
    if (isError) console.error(CONSOLE_ERROR.PROFILE.GET + error);
    if (isSuccess) {
      setProfileImageURL(data.profileImageURL);
      setNickName(data.nickname);
      setProfileIntro(data.profileIntro);
    }
  }, [isError, isSuccess]);

  return { profileImageURL, nickname, profileIntro };
};

• useProfile을 호출하면 fetch가 진행되면서 state를 업데이트합니다.
• memberId truly 값을 가질 때만 fetch가 진행됩니다.
• useUser와 마찬가지로 state 업데이트는 useEffect 내부에 적어주었습니다.

테스트

에러없이 잘 돌아가는 걸 확인했습니다!

🚨 버그 발생 이유

작업하면서 발생했던 에러를 정리하자면 아래와 같습니다

Rendered more hooks than during the previous render.

마이페이지에서 새로고침시 위 에러가 발생하면서 렌더링이 되지 않았습니다. 마이페이지의 ProfileSection 컴포넌트에서 발생하는 것을 알게되었고 원인은 useProfile에 있었습니다. 그때 당시의 useProfileStore와 useProfile 코드입니다

const useProfileStore = create<ProfileState>(set => ({
  profileImageURL: '',
  nickname: '',
  profileIntro: '',
  actions: {
    setProfileImageURL: profileImageURL => set({ profileImageURL }),
    setNickName: nickname => set({ nickname }),
    setProfileIntro: profileIntro => set({ profileIntro }),
    fetchProfile: () => {
      const memberId = useUser();

      if (!memberId) return;

      const { data, isError, error } = useQuery({
        queryKey: ['profile'],
        queryFn: () => fetchAxios(memberId),
      });

      if (isError) console.error(CONSOLE_ERROR.PROFILE.GET + error);
      if (data) {
        set({ profileImageURL: data.profileImageURL });
        set({ nickname: data.nickname });
        set({ profileIntro: data.profileIntro });
      }
    },
  },
}));

export const useProfile = () => {
  const profileImageURL = useProfileImageURL();
  const nickname = useNickname();
  const profileIntro = useProfileIntro();
  const { fetchProfile } = useProfileActions();
  fetchProfile();

  return { profileImageURL, nickname, profileIntro };
};

챗지피티에게 물어보니 이 에러는 React의 함수형 컴포넌트에서 Hook 호출 규칙을 위반할 때 발생한다고 합니다.

useProfile 훅에서 fetchProfile 함수를 호출하는데, 이 함수 내에서 useQuery 훅이 사용되고 있고 useQuery는 fetchProfile 함수가 조건에 따라 호출되기 때문에, 컴포넌트의 렌더링 과정에서 조건부로 훅이 실행될 수 있습니다. 이는 훅의 호출 순서가 변경될 수 있다는 것을 의미하며, 이것이 오류의 원인이 됩니다. 라고 했습니다..

그래서 useProfile에서 useQuery를 직접 호출하는 식으로 해결했습니다.

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

zustand가 처음이라 이 방법이 옳은 방법인지 판단이 잘 서지 않습니다! 도와주세요!

📚 참고 자료 (선택 사항)

Zustand 사용법 zustand 어떻게 써야 잘썼다고 소문날까 Zustand 현명하게 사용하기 (불필요한 리렌더링 막기)

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: #98

[rkdcodus]

넵!! 추후 최적화 진행해보겠습니다!