Cộng đồng Hỏi & Đáp của Inflearn

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

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

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

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

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

• Zustand 공식 문서 - Next.js 가이드
  
• Leonkong 블로그 - Next.js와 Zustand 통합 가이드
  

풍부한 설명을 추가하자면:
- 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;

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