[Vue.js] Vuex 대신 Pinia 사용을 권장하는 이유

Vue 3 + Vite로 프로젝트 작업을 하다가 Vuex를 쓰는게 유지보수가 힘들 것 같다는 생각이 들어 만들던 프로젝트를 리팩토링했다. 다른 상태 관리 도구도 리덕스나 컴포지션 API 등이 있지만 리덕스는 리액트 환경에 더 맞는 것 같고 컴포지션 API는 안써봐서 Vue 3에서 권장한다는 Pinia를 쓰기로 했다.

일단 Pinia가 Vuex보다 뭐가 더 나은지부터 알고서 써야 할 것 같아서 이유도 검색해보고 정리를 한 번 해두기로 했다.

GPT한테 Vuex를 안쓰고 Pinia를 선택한 경로를 물어봤더니 알려준 내용 👇🏻

- **Vue 2**에서는 **Vuex 3**이 주요 상태 관리 도구였습니다.
- **Vue 3**에서도 **Vuex 4**가 호환되었지만, Vue 팀은 **Pinia**를 권장하기 시작했고, 컴포지션 API와의 자연스러운 통합을 위해 **Pinia**가 더 널리 사용되었습니다.
- **Vue 4**에서도 **Pinia**가 더 많이 사용되었고 Vuex는 유지보수 단계에 접어들었습니다.
- **Vue 5**는 아직 개발 중이며, Pinia가 주류 상태 관리 도구로 자리 잡을 것으로 예상됩니다.

요약하면 Vuex는 Vue 2와 3, 4에서도 사용 가능하지만 Vue 3 이후부터는 Pinia 사용이 권장되고 Vuex는 업데이트가 중단되고 유지보수 상태로 남아 있다고 한다.

## Vuex와 Pinia의 구조 차이

둘은 소스 폴더 구조도 약간 다르다.

• Pinia는 모듈 시스템이 없어서 구조가 더 단순하고 각 store가 독립적이라 파일 하나로 완결성이 있다.
• Vuex는 store를 초기화하는 index.js가 필요하지만, Pinia는 각 store 파일이 독립적으로 동작해서 index.js가 필수가 아니다.
• 관례적으로 Vuex는 ‘store’ 폴더명을, Pinia는 ‘stores’ 폴더명을 사용한다.

일반적인 Vuex의 구조 예시

src/
  store/
    index.js        # store 설정 및 모듈 결합
    modules/        # 모듈을 분리해서 관리할 때 사용
      auth.js

일반적인 Pinia의 구조 예시

src/
  stores/          # pinia는 보통 stores 폴더명을 사용
    auth.js

Vuex 대신 Pinia를 도입해야 하는 이유

1. 더 쉬운 사용법

• Pinia는 Vuex보다 API가 간단하고 직관적이라 전역 상태 관리 기능을 쉽게 설정하고 사용할 수 있어서 진입 장벽이 낮은 편이다.
• state, mutations, actions 등을 더 효율적이고 깔끔하게 관리할 수 있다.

2. 타입스크립트 친화적

• Pinia는 기본적으로 타입스크립트(TypeScript)를 지원한다는 점에서 Vuex와 다르다. Vuex 3는 TypeScript와 함께 사용할 수 있지만 설정이 복잡할 수 있는 반면, Pinia는 처음부터 타입스크립트와의 호환성이 뛰어나서 별도의 설정 없이도 편리하게 사용할 수 있다.

→ 지금은 자바스크립트로 작업중이지만 나중에라도 타입스크립트를 쓸 일이 생길 수도 있으니 Pinia를 써야겠다고 생각했다.

3. Vue 3와의 완벽한 호환성

• Pinia는 Vue 3의 컴포지션 API(Composition API)를 기반으로 설계되었기 때문에 컴포지션 API와 자연스럽게 통합된다. 한편, Vuex는 기본적으로 옵션 API에 기반을 두고 있어 Vue 3에서 완전히 최적화된 상태는 아니다.
• Pinia는 Vue 3 생태계와 더 잘 맞는 구조를 가지고 있어 최신 Vue 기능을 효과적으로 사용할 수 있다.

4. 더 나은 개발자 경험

• Pinia는 Vue Devtools와의 통합이 매우 잘 되어 있으며, 상태를 쉽게 디버깅할 수 있다.
• 상태를 핫 리로드(Hot Reload) 할 수 있어 개발 중에 더 나은 생산성을 제공한다. 즉, 상태 관리를 변경해도 페이지를 새로고침하지 않고 그대로 상태를 유지할 수 있는 것이다.

5. 모듈 시스템 간소화

• Vuex는 모듈 시스템을 통해 대규모 애플리케이션에서 상태를 분리하고 관리할 수 있지만, 설정이 복잡하고 사용하기 까다로울 수 있다.
• 반면 Pinia는 모듈 대신 스토어 개념을 사용하여 상태 분리를 훨씬 간결하고 쉽게 관리할 수 있습니다. 여러 스토어를 독립적으로 정의할 수 있으며, 필요할 때만 사용하도록 할 수 있다.

→ 리팩토링 해놓고 보니까 이 점이 진짜 편하다는 걸 느꼈다.

6. 작은 번들 사이즈

• Pinia는 경량화되어 있어 Vuex에 비해 번들 크기가 작다.

→ 나중에 프로젝트 규모가 커지면 어떻게 할지 고민해봐야겠지만 지금처럼 작업중인 게시판, 로그인 CRUD처럼 상태 관리에 많은 코드가 필요하지 않은 프로젝트에서는 Pinia가 더 적합하다.

7. Vuex 5 개발 중지

• Vue와 Vite를 개발한 Evan You는 x에서 사실상 Vuex 5는 Pinia라고 말한 바 있다. Vuex 5 버전 개발이 중단되면서 Pinia가 공식적으로 Vue 3의 상태 관리 솔루션으로 채택되었다.

• vue-js
• vite-js