Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때

• 증상부터 정확히 보기
• 왜 이런 문제가 생기는지
• 실제 코드에서 고치는 방법
• 수정 후 확인할 체크리스트
• 정리

증상부터 정확히 보기

Zustand 상태를 바꿨는데 리렌더링되지 않는 이유를 만났을 때 먼저 볼 것은 에러 문구 자체보다 문제가 발생한 위치입니다. 같은 증상처럼 보여도 설정 파일에서 생긴 문제인지, 렌더링 시점 문제인지, 데이터나 상태를 바꾸는 방식 문제인지에 따라 해결 방법이 달라집니다.

입문 단계에서는 문제를 빨리 없애려고 가장 강한 해결책부터 붙이기 쉽습니다. 하지만 그렇게 처리하면 다음 화면에서 비슷한 문제가 반복됩니다. 작은 재현 코드로 줄이고, 어떤 값이 어느 시점에 바뀌는지 확인하는 편이 더 안전합니다.

왜 이런 문제가 생기는지

이 문제의 중심에는 Zustand store 값은 바뀐 것 같은데 컴포넌트가 다시 그려지지 않는 상황이 있습니다. 겉으로는 스타일, 렌더링, 권한, 상태 업데이트처럼 다르게 보이지만 실제로는 도구가 코드를 해석하는 시점과 개발자가 기대한 시점이 어긋나는 경우가 많습니다.

특히 Zustand 작업에서는 설정, 실행 환경, 상태 참조, 렌더링 순서가 함께 영향을 줍니다. 그래서 “왜 안 되지?”에서 멈추지 말고 어떤 조건에서 재현되는지, 새로고침 후에도 같은지, 빌드 환경에서도 같은지 나눠서 보는 것이 좋습니다.

실제 코드에서 고치는 방법

수정은 문제를 가장 작게 재현한 뒤 적용하는 것이 좋습니다. 아래 예시는 실제 프로젝트 코드 전체가 아니라, 확인해야 할 핵심만 남긴 형태입니다.

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({ items: [...state.items, item] })),
}));

코드를 바꿀 때는 결과만 확인하지 말고 “왜 이 방식이면 문제가 사라지는지”를 같이 확인해야 합니다. 그래야 다음에 같은 문제가 설정, 컴포넌트, 서버 실행 시점, 상태 업데이트 방식 중 어디에서 생겼는지 빠르게 좁힐 수 있습니다.

수정 후 확인할 체크리스트

수정 후에는 개발 서버에서만 확인하지 말고 새로고침, 빌드, 실제 데이터 조건을 함께 봅니다. 조건이 하나만 달라져도 문제가 다시 보일 수 있기 때문입니다.

체크할 순서는 간단합니다. 먼저 재현 조건이 사라졌는지 확인하고, 그 다음 같은 패턴이 다른 파일에 남아 있는지 봅니다. 마지막으로 임시 회피 코드가 남아 있지 않은지 정리합니다.

정리

Zustand 상태를 바꿨는데 리렌더링되지 않는 이유는 한 가지 정답 코드보다 원인을 좁히는 순서가 더 중요합니다. 증상, 실행 시점, 설정, 상태 변경 방식을 나눠서 보면 불필요한 수정이 줄고, 다음 문제를 만났을 때도 확인할 지점이 분명해집니다.