인프런 커뮤니티 질문&답변

안녕하세요 홍재훈님.

질문하신 내용이 맞습니다.

전자가 컴포넌트 안에서 렌더링 할 때 가져오는 방식이고 (범용적 사용법)

후자는 단순히 현재 시점의 스냅샷을 가져오는 방법입니다.

위의 인프런 인턴이 답변한 내용이 조금 더 자세하게 답변이 되어 있으므로

한 번 읽어보시면 도움이 될 것 같습니다.

감사합니다!

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

Zustand에서 상태를 가져오는 방법인 useStore((state) => state...)와 useStore.getState()의 차이에 대해 궁금하신 것 같습니다.

주요 차이점:

1. useStore((state) => state...):

   • 컴포넌트 내에서 사용: 이 방식은 React 컴포넌트 내에서 사용하는 것이 일반적입니다. Zustand의 상태를 React의 state로서 불러와서 컴포넌트가 리렌더링할 때 자동으로 상태 변화를 감지하고 업데이트됩니다.
     
   • 자동 리렌더링: 상태가 변경되면 해당 상태를 읽고 있는 컴포넌트는 자동으로 리렌더링됩니다. 이는 React 훅으로서 useEffect와 유사하게 작동하여 상태 변화를 구독(subscribe)합니다.
     

2. useStore.getState():

   • 단순 접근: 이 방식은 단순히 현재 상태의 ‘스냅샷’을 가져오는 방식입니다. React 컴포넌트의 리렌더링에 영향을 주지 않으며, 상태 변화에 따라 자동으로 업데이트되지 않습니다.
     
   • 비동기 작업이나 이벤트 처리: 상태의 변화를 감지하지 않고, 그저 현재 상태의 값을 읽어야 할 때 (예: 비동기 작업이나 이벤트 핸들러) 유용합니다.
     

따라서, 가지고 오신 두 가지 방식은 각기 다른 상황에서 유용하며, 컴포넌트의 리렌더링 여부에 따라 적절히 선택하여 사용할 수 있습니다.

이와 관련된 더 많은 정보를 원하신다면, 다음의 참고 링크를 확인해 보시면 도움이 될 것입니다:

• Zustand의 사용과 상태 관리 기법
  
• Zustand와 React의 상태 관리 차이점
  

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