[TIL] zustand 사용 시 state.state와 getState()의 차이

1. useUserStore((state) => state.isLoggedIn)

특징

• React 컴포넌트에서 주로 사용: 이 방식은 Zustand 상태를 React 컴포넌트에 연결합니다.
• Zustand의 상태(isLoggedIn)를 구독(subscribe) 합니다.
  • 상태가 변경되면 컴포넌트가 자동으로 다시 렌더링됩니다.
• 상태 관리와 React의 재렌더링 메커니즘이 결합됩니다.

예시

function Header() {
  const isLoggedIn = useUserStore((state) => state.isLoggedIn);

  return <div>{isLoggedIn ? "Logged In" : "Logged Out"}</div>;
}

장점

• React와 상태의 동기화가 자동으로 이루어짐.
• 상태가 변경되었을 때 React 컴포넌트를 다시 렌더링하여 최신 상태를 반영.
• 필요한 상태만 구독하여, 불필요한 렌더링을 줄일 수 있음.

---

2. useUserStore.getState()

특징

• React와 독립적으로 상태를 가져옴: 이 방식은 상태를 구독하지 않으며 React 컴포넌트와 연결되지 않습니다.
• 상태를 즉시 가져오기 위해 사용.
• 구독하지 않으므로 상태 변경에 따라 컴포넌트가 자동으로 렌더링되지 않음.

예시

function logCurrentState() {
  const currentState = useUserStore.getState();
  console.log(currentState.isLoggedIn);
}

장점

• React 컴포넌트 외부(예: 이벤트 핸들러, API 호출 후 상태 확인)에서 상태를 즉시 가져올 때 유용.
• 성능 최적화: 상태를 단순히 가져오는 용도로만 사용하기 때문에 불필요한 렌더링이 발생하지 않음.

---

주요 차이점 비교

특징useUserStore((state) => state.isLoggedIn)useUserStore.getState()

React 컴포넌트와의 연결	React와 상태를 구독하며 자동으로 렌더링을 갱신.	React와 독립적, 상태 변경과 무관.
상태 변경 감지	상태 변경 시 컴포넌트가 재렌더링.	상태 변경을 감지하지 않음.
사용 목적	React 컴포넌트 내부에서 상태 관리와 UI 갱신에 사용.	이벤트 핸들러, API 응답 처리 등에서 즉시 상태 확인.
성능	필요한 상태만 구독하여 최적화 가능.	렌더링에 영향 없음.

---

사용 예시 비교

useUserStore((state) => state.isLoggedIn)

React 컴포넌트가 상태 변경에 따라 UI를 업데이트해야 할 때 사용:

function UserStatus() {
  const isLoggedIn = useUserStore((state) => state.isLoggedIn);

  return <div>{isLoggedIn ? "Welcome Back!" : "Please Log In"}</div>;
}

useUserStore.getState()

상태를 단순히 확인하거나, React와 연결되지 않은 코드에서 상태를 가져올 때 사용:

function handleLogin() {
  const { isLoggedIn } = useUserStore.getState();
  if (isLoggedIn) {
    console.log("Already logged in!");
  } else {
    console.log("Proceeding with login...");
  }
}

---

언제 어떤 걸 써야 하나?

1. React 컴포넌트 내부에서 상태를 관리하고 UI를 갱신하려면:
   • useUserStore((state) => state.isLoggedIn)를 사용하세요.
2. React와 무관하게 단순히 현재 상태를 가져오고 싶다면:
   • useUserStore.getState()를 사용하세요.

이 두 가지는 사용 목적이 다르므로, 필요한 상황에 따라 적절히 선택하면 됩니다.