inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Học mã hóa bản sao YTMusic Next từ những điều cơ bản (với next.js 14, UI Master)

7.2 zustand home danh mục

next zustand 사용 시 문의

474

femaster1

5 câu hỏi đã được viết

0

next zustand 세팅 시, provider 를 사용해야한다는 글이 있어서요.

현재 강의처럼 이후에 서비스 개발 시 사용해도 이슈가 없는 부분일까요?
https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-store

https://leonkong.cc/nextjs-zustand-

react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand

Câu trả lời 2

1

dodocoding

참고 문서를 보니 zustand와 useContext를 같이 쓸때 셋업방법이네요.

Zustand는 external store를 사용해서 구지 useContext 에 묶어서 사용할 필요는 없어보입니다.

0

femaster1

감사합니다.

제가 읽어보기로는 해당 부분이 요청 간 공유되지 않도록, 스토어를 만드는 것 같기도 해서요

Next는 ssr이니 서버에서 작동해 이런 부분도 고민이 필요한 건가 싶어서요

이슈가 있어서, 불편하지만 context 까지 써서 세팅하는 것처럼 보이기도 하고요 흠.. 걱정하지 않아도 되려나요

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. femaster1님.

Zustand를 Next.js에서 사용할 때 Provider를 활용해야 하는 경우가 있습니다. 특히 SSR (Server-Side Rendering)이나 여러 개의 zustand store를 사용해야 하는 경우 Provider가 필요할 수 있습니다.

아래의 링크들에서 자세한 방법과 예제를 확인하실 수 있습니다:

풍부한 설명을 추가하자면:
- Provider 사용 필요성: 일반적으로 클라이언트 사이드에서 상태를 관리할 때는 zustand만으로도 충분합니다. 하지만 서버 사이드 렌더링(SSR) 환경에서는 상태를 서버에서 클라이언트로 전달해야 하므로 Provider를 사용해야 합니다.
- 사용 예시: zustand로 store를 만들고 이를 Provider로 감싸서 전역으로 상태를 관리할 수 있습니다.

다시 말해, 다음과 같은 상황에서 Provider는 필수적일 수 있습니다:
1. 서버 사이드 렌더링(SSR)을 사용하여 데이터를 사전 로딩할 때.
2. 여러 개의 store를 각각 Provider로 활용하여 독립적으로 관리해야 할 때.

예시 코드:

import { Provider } from 'react';
import { useStore } from './store';

function MyApp({ Component, pageProps }) {
  const store = useStore(pageProps.initialZustandState);

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

4.6강 초기 로딩 속도 케이스 비교

0

85

2

Sidebar & Header 컴포넌트 등 레이아웃 설정 방식

0

89

3

문의드립니다.

0

147

3

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

1

102

2

에러, 로딩 내용 페이지를 모든 페이지에 다 만드는 이유가 따로 있나요?

2

158

3

3.2, 3.3 화면에 아무것도 나오지 않고 있습니다!

0

211

3

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

1

222

3

강의외 복잡한 ui 입력폼 관련 질문 있습니다

1

221

2

npx랑 yarn이랑 같이 써도 되나요?

0

437

2

article / section 태그에 관해

0

179

1

카테고리 변경 시 이미지 로딩

1

191

2

component 파일에서는 tsx파일이 아니라 jsx 파일을 쓰는 이유를 알 수 있을까요?

1

176

2

versel 을 통한 배포를 하는 것과 (홈서버 + 클라우드 플래어 프록시)를 하는 것을 비교해주실 수 있나요?

1

179

1

선생님 죄송한대

1

152

1

깃 push가 안되서 ssh를 한참해메고 있습니다. ㅠㅠ

1

144

1

Chapter 7 영상 화면이 안보입니다.

0

274

2

오류발생 문제입니다.

1

231

1

질문있습니다.

1

181

1

11.5 Channel 노래,앨범 section 강의중

0

157

1

소스 수정 후 자동 컴파일 문의드립니다.

1

283

2

정적배포

0

197

1

zustand 상태관리

0

335

1

state에서 buffer랑 time이 안 나옵니다

0

201

2

components 들은 jsx 로 만드신 이유

0

313

3