[Vue.js 상태관리 3편] Vuex 언제, 어떻게 써야할까?

Redux 를 고안한 Dan Abramov 는 상태 관리에 대해 다음과 같은 의견을 말한 적이 있습니다.

 

Flux 라이브러리는 안경과 같습니다. 언제 필요할지는 스스로 알게 됩니다.

 

이번 포스트에서는 vuex 를 언제 쓰는 것이 좋을지에 대한 고민을 해보겠습니다.

어느 기술이나 마찬가지이듯 항상 정답인 것은 없으니까요 😄.

 

📌 Vuex 도입 시 고려할 점

애플리케이션 규모

많은 사람들은 앱의 규모가 커지면 Vuex 가 꼭 필요할 것이라고 말합니다.

좀 더 자세하게는 앱이 어떠한 방식으로 규모가 커지고 있는지가 중요합니다.

 

대부분의 데이터 흐름은 일정한 패턴을 가지고 있는 경우가 있기 때문에

중앙 집중식으로 관리가 필요할 것 같다는 판단이 들 때까지

정말 Vuex 가 필요한 상황인지 생각해볼 필요가 있습니다.

 

앱의 규모가 작은데 Vuex 를 적용한다면 다음과 같이 코드가 너무 장황해질 수 있습니다.

 

 

위는 Vuex 를 사용한 것과 사용하지 않은 버전의 코드입니다.

Vuex 를 사용할 경우 보일러 플레이트 코드가 증가해 코드 복잡도를 높일 수도 있습니다.

이 경우에는 store pattern 을 통한 상태 관리도 좋은 방법이 될 수 있습니다.

 

로직과 데이터 복잡도

데이터가 복잡해지고 다양한 컴포넌트에서 사용되어야 할 경우에 대해서도 생각해봐야 합니다.

예를 들어 복잡한 인증 관련 데이터는 전역적으로 사용되며

이를 통해 특정 화면 진입을 허용하는 분기를 적용합니다.

이러한 경우 Vuex 는 데이터를 관리하는 좋은 방법이 될 수 있습니다.

 

이를 요약하면 다음과 같습니다

 

📌 Vuex 에 어떤 데이터를 저장할까?

이제 프로젝트에 Vuex 를 도입하기로 결정했다고 가정하겠습니다.

그러면 어떤 데이터를 Vuex 에서 관리하는 것이 좋을까요?

 

이에 대해 많은 Vue 개발자들이 다양한 의견을 제시하고 있고

그 중 흥미로운 다이어그램을 찾아서 가져와봤습니다 😄.

 

 

Provide / Inject 🤔 ...?

사실 저는 Provide / Inject 에 대해서 회의적인 편입니다.

해당 기능을 사용하면 데이터 흐름 파악이 어렵고 이로 인해 디버깅이 힘들어집니다.

Vue 공식 문서에서도 고급 플러그인이나 컴포넌트 라이브러리를 위한 기능이라고 명시되어있습니다.

저 같은 경우 작은 규모의 애플리케이션에서 Vuex 를 사용하지 않을 때

props drilling 을 피하기 위한 하나의 방법으로 사용해본 적이 있습니다.

 

📌 참고 자료

Do you really need Vuex? - LogRocket Blog

API - Vue.js