Zustand 상태 구독 여부에 따른 렌더링 차이

Zustand 상태 구독 여부에 따른 렌더링 차이

상태 관리 라이브러리 Zustand에서 getState()와 상태 구독을 사용하는 방법의 차이를 이해하면 리렌더링 최적화에 도움이 됩니다.

const Header = () => {
 const isLoggedIn = useBoundStore.getState().isLoggedIn;
 const user = useBoundStore.getState().user;

return <div>{user?.name}</div>; 
}

위 코드에서는 getState()를 사용해 상태를 직접 접근했지만, 상태 변화를 구독하지 않으므로 상태가 변경되더라도 컴포넌트가 다시 렌더링되지 않습니다. 반면, 구독을 통해 리렌더링을 관리할 수 있는 방법도 있습니다.

✅ 올바른 구독 방법 - 상태 변화를 반영

구독을 통해 상태 변화를 반영하려면 다음과 같이 useBoundStore를 사용하여 구독하면 됩니다.

const Header = () => { 
const isLoggedIn = useBoundStore((state) => state.isLoggedIn);
 const user = useBoundStore((state) => state.user);

return <div>{user?.name}</div>; 
}

언제 어느 방법을 사용할지

• 상태 변화를 반영해야 하는 UI 요소에는 두 번째 방식을 사용해 구독하는 것이 좋습니다. 예를 들어, 로그인 상태나 유저 정보가 자주 변경되며, 변경될 때마다 UI가 자동으로 업데이트되어야 하는 경우 두 번째 방식이 적합합니다.
• 상태 변화를 반영할 필요가 없는 경우는 첫 번째 방식처럼 구독하지 않고 필요한 시점에만 상태를 확인할 수 있습니다.