Zustand는 라우팅과 React Router의 차이

우선 Zustand는 라우팅 라이브러리가 아니다.

기본적으로 Zustand는 React Router의 대체제가 아니라 상태관리 라이브러리이다. 

 

그래서 실무에서 말하는 “Zustand 라우팅”은 보통 다음을 의미한다.

 

"라우터를 쓰지 않고 Zustand 상태로 화면을 전환하는 방식"

 

React Router는 URL 기반 라우팅인데 반해 Zustand 방식은 상태 기반 화면 전환으로 

여기서 말하는 '상태'는 useState가 아니라 “전역 상태(global state)”를 뜻한다.

 

1. React Router 방식

URL 기반 라우팅으로 

<Routes>
  <Route path="/pipes" element={<PipePage />} />
  <Route path="/valves" element={<ValvePage />} />
</Routes>

 

이렇게 url이 변경되면 해당 라우터가 매칭되고 해당 컴포넌트를 랜더링하게된다.

즉, url로 페이지가 구분되고 새로고침, 뒤로가기 버튼이 사용 가능하다.

 

2. Zustand 방식

이 방식은 URL을 사용하지 않고 상태로 화면을 바꾼다.

 

const useViewStore = create((set) => ({
  currentPage: "pipes",
  setPage: (page) => set({ currentPage: page })
}));

이렇게 캐싱스토어를 만든 뒤

 

const { currentPage } = useViewStore();

if (currentPage === "pipes") return <PipePage />;
if (currentPage === "valves") return <ValvePage />;

이렇게 if문 혹은 switch case문으로 조건을 붙여서 페이지를 로드한다.

 

특징은 url이 변경되지 않고 페이지가 바뀌며 새로고침을 하면 홈화면으로 이동하게 된다.

 

3. 실무적 사용 사례

일단 대부분의 웹 서비스는 리액트 라우터를 사용한다.

 

예시)

- 쇼핑몰

- 블로그

- 서비스 웹앱

- 대시보드

 

이유는 URL 필요하고 뒤로가기 기능이 필요하기 때문이다.

 

주스탄트 방식을 사용하는 경우는

관리시스템이나 내부시스템인 경우에 사용한다.

 

예시)

- ERP

- GIS

- 관리자 CMS

- 복잡한 업무툴

 

이유는 탭(모달)구조가 필요하고, url이 필요없기 때문이다.

 

여기서 url이 필요하다는 것은 사용자가 특정 화면을 URL로 직접 접근하거나 공유하는 경우가 있냐없냐를 뜻한다.

url을 다른사람에게 보내면 그 사람도 같은 페이지를 봐야하는 경우는 관리시스템이나 내부시스템이 아닌 일반적인 웹 서비스에 해당한다. 이같은 경우에는 url기반 라우팅이 필수적이다.