Feature/add zustand #6
Conversation
…-playground into feature/add-zustand
src/components/Header.tsx
Outdated
| @@ -101,7 +75,7 @@ export const Header = () => { | |||
| ) : error ? ( | |||
| <p className="text-red-500">{error}</p> | |||
| ) : ( | |||
| <p className="text-white">{currentQuiz.title}</p> | |||
| <p className="text-white">{currentQuiz?.title}</p> | |||
src/components/Header.tsx
Outdated
| @@ -63,13 +35,15 @@ export const Header = () => { | |||
| const parsedQuizId = parseInt(quizId || '', 10); | |||
| if (currentQuiz && parsedQuizId > FIRST_QUIZ_ID) { | |||
| const previousQuizId = parsedQuizId - 1; | |||
| setError(null) | |||
There was a problem hiding this comment.
p2) 퀴즈가 바뀌었을 때 공통으로 돌아가는 부수효과로 보여요.
src/store/useQuiz.ts
Outdated
| loading: false, | ||
| error: null, | ||
| setLoading: (loading: boolean) => set({ loading }), | ||
| setError: (error: string | null) => set({ error }), |
There was a problem hiding this comment.
p3) 이 친구들이 정녕 퀴즈 스토어에 있어야 하는지 저는 조금 의문스러워요..
There was a problem hiding this comment.
퀴즈스토어에 있어야한다고 생각한건
특정 컴포넌트에서 서버에 요청해 값을 받아오기 때문에 전역상태관리에 놓고 공유해야한다고 생각했고
값이 로딩이 되지않았을떄나 에러시를 모든 컴포넌트에서 공유해야한다고 생각했었습니다.
그렇다면 각각 컴포넌트에서 에러나 로딩 관련된것을 관리하는게 나을까요??
There was a problem hiding this comment.
로딩이랑 에러 상태 자체를 여기에 들고 있는 건 괜찮은데 setter들을 외부에 노출하는 건 좀 어색해요. 로딩이랑 에러 상태는 내부에서 알아서 관리하는 게 자연스럽다고 봐요 전.
| } | ||
|
|
||
| export const useQuizStore = create<QuizState>((set) => ({ | ||
| currentQuiz: null, | ||
| currentQuiz: {} as QuizType, |
There was a problem hiding this comment.
이런 단언은 피하는 게 좋아요. 타입스크립트 사용이 무용해지고 실제로 스토어를 사용하는 쪽에서 로딩도 에러도 아니면 퀴즈 데이터가 있는 게 맞을 텐데 currentQuiz.title || "퀴즈없음"이라는 어색한 코드가 생겼죠. 지금은 일단 넘어가세요. 나중에 타입스크립트에 조금 더 익숙해지시면 방법이 보이실 거예요.
src/store/useQuiz.ts
Outdated
| set({ currentQuiz: data, loading: false }); | ||
| } else { | ||
| set({ error: '퀴즈가없수', loading: false }); | ||
| } | ||
| } catch (error) { | ||
| set({ error: '퀴즈 데이터 통신 에러 발생', loading: false }); |
There was a problem hiding this comment.
loading: false는 finally 블럭에서 처리하면 좋겠네요.
There was a problem hiding this comment.
finally 블록에서 한번에 처리하게 되면 각 경우의수가 실행되는 시점마다 바로 반영을 하지 않는거 같은데 상관없는 부분일까요!!?
There was a problem hiding this comment.
음 무슨 말인지 잘 모르겠는데 finally로 옮기면 loading이 false로 바뀌는 시점이 다르다는 뜻인가요?
There was a problem hiding this comment.
네 시점이 다르다고생각했었는데 좀 더 생각해보니까 어차피 함수실행이 끝날때 실행되는거기때문에 상관없는거로 파악했습니다 감사합니다.
|
feature : zustand 설치, useQuiz.ts 생성, useQuizStore 상태관리
refactor: mock 데이터 수정
refactor: Header 컴포넌트 내부상태관리 zustand로 교체