inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

(3.2) Zustand 기본 사용법 1

Zustand의 Store 타입은 어떤 기준으로 작성하는 건가요?

해결된 질문

38

유혁스쿨

작성한 질문수 9

0

안녕하세요, 선생님.

Zustand 스토어에 타입을 지정하는 부분이 궁금해서 질문드립니다.

강의에서는 다음과 같이 상태와 액션을 Store 타입으로 선언한 뒤, create 함수의 제네릭으로 전달했습니다.

type Store = {

  count: number;

  increase: () => void;

  decrease: () => void;

};

const useStore = create<Store>((set, get) => ({

  count: 0,

  increase: () => {

    const count = get().count;

    set({ count: count + 1 });

  },

  decrease: () => {

    set((store) => ({

      count: store.count - 1,

    }));

  },

}));

처음 코드를 작성했을 때는 get()의 반환값과 set의 콜백 매개변수인 store에서 타입 오류가 발생해서, 저는 해당 부분마다 타입을 직접 지정해야 한다고 생각했습니다.

그런데 강의를 보니 놀랍게도 create<Store>처럼 제네릭만 지정해도 setget에 관련된 타입 오류가 모두 해결되었습니다.

여기서 제가 궁금한 점은 다음과 같습니다.

1. Store 타입에는 왜 count, increase, decrease처럼 스토어 객체에 들어갈 상태와 액션만 작성하면 되는 건가요?

2. 처음 Zustand를 사용하는 사람은 Store 타입을 이런 형태로 작성해야 한다는 것을 공식 문서의 TypeScript 예제를 보고 알게 되는 건가요?

3. 아니면 패키지의 .d.ts.d.mts 같은 타입 선언 파일을 직접 확인하고, createStateCreator의 타입 구조를 해석해서 작성하는 건가요?

4. create<Store>에 지정한 타입이 내부의 set, get, 그리고 set 콜백의 store 타입까지 전달되기 때문에 오류가 해결된 것인지도 궁금합니다.

실제로 라이브러리를 사용할 때는 공식 문서의 사용법을 먼저 따라 하고, 타입이 적용되는 원리가 궁금하거나 오류가 발생했을 때 타입 선언 파일을 확인하는 방식이 일반적인지도 궁금합니다.

AI가 아닌 정환선생님이 직접 답변 부탁드리겠습니다.

react typescript react-query supabase zustand

답변 2

1

유혁스쿨

맞네요.. 답변 보기전에 궁금해서 직접 공식문서 보니까 어떻게 타입스크립트 적용하는지 템플릿이 있더군요...! 성의있는 답변 너무 감사합니다!
의문 해결 완료 ~ vV

0

이정환 Winterlood

안녕하세요 유혁스쿨님 이정환입니다.

결론부터 말씀드리자면 create 메서드에 제네릭 타입 변수로 Store 타입을 전달하면, create 메서드가 알아서 Store 타입에 맞춰 get과 set 메서드의 타입을 설정합니다. 따라서 이 메서드들의 타입까지는 우리가 직접 설정하지 않아도 됩니다. 자동으로 설정됩니다 😀

1, 4) 앞서 말씀드렸듯 get과 set 메서드의 타입은 Store 타입에 맞춰 자동으로 설정됩니다.

2, 3) 네 맞습니다. 보통은 공식문서의 예제를 살펴보고, VSCode에서 직접 실습해보며 "아 get과 set 메서드에 타입이 자동으로 설정되는구나" 하고 이해하는걸로 알고 있습니다. 저 또한 그렇게 학습합니다. 물론 더 자세히 파헤쳐 보려면 내부의 코드까지 파악해야 하겠지만, Zustand는 단순 도구일 뿐이므로 비슷한 도구를 제작하는게 목표가 아니라면 굳이 그 정도까지 파헤칠 필요는 없다고 생각하고 있습니다.


마지막으로 실제로 라이브러리를 사용할 때는 공식 문서의 사용법을 먼저 따라 하고, 타입이 적용되는 원리가 궁금하거나 오류가 발생했을 때 타입 선언 파일을 확인하는 방식이 일반적인지도 궁금합니다. 라고도 질문 주셨는데요

네 맞습니다. 모든 라이브러리마다 구체적인 구현체를 다 파악하고 사용하기에는 시간도 부족하고 여력도 없기 때문에 보통은 대략적인 사용법만 파악하는게 일반적입니다.

(예를 들어 React.js가 정말 구체적으로 어떤 방식으로 DOM을 수정하고 화면을 그려내는지 구현체 까지 파악하고 있는 분들을 많이 계시지 않는 것 처럼 말이죠)

PS. 만약 해결되지 않는 문제가 생기거나 원하는 구조의 코드 설계가 이루어지지 않을 경우에는 특정 부분의 디깅은 필요할 수 있습니다.

포스트 작성 중 이탈 방지 기능 (취소 버튼 클릭 시 오류)

0

68

2

"포스트 생성에 실패했습니다" 실패 문구와 함께 에러가 발생합니다ㅠㅠ

0

69

2

강의자료는 어떻게 제작하시나요?

0

80

2

비밀번호 재설정 1회용 이메일 링크

0

79

1

강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.

2

89

1

회원가입 구현 (구현 후 최종 화면 출력 X)

0

107

2

(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의

0

77

1

명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이

0

85

2

useMutation 적용 후 새로운 글 등록시 content가 안보여요

0

94

2

6.8 zustand 세션 질문입니다.

0

147

2

next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?

0

122

2

shadcn에서 radix ui와 base ui 차이는 뭔가요?

1

705

2

updateTodo 함수 생성시 화살표 함수 사용 안하는 이유

0

112

2

4.11 바로 투두 삭제가 안됨 질문

0

136

3

매개변수 updatedTodo 관련 질문

0

104

3

인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!

0

122

2

supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!

0

116

2

4.6 id를 string으로 변경시 오류

0

106

2

리액트 타입스크립트 관련 질문있습니다.

0

90

1

소셜 로그인 구현하기 관련하여 질문이 있습니다!

0

146

2

ui 파일 질문드립니다.

0

114

1

tanstack query devtools에서 질문있습니다!

0

100

2

댓글 삭제 시 isPending 질문

0

84

2

두번째 예외상황에 대해 질문있습니다!

0

83

1