상태 관리(State Management)
정의
상태 관리는 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미한다.
상태관리가 필요한 이유
컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면이 구성된다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적, 효율적으로 관리할 필요성이 생기기에 상태 관리가 필요하다.
일반적으로 앱의 규모가 커지면서 생기는 문제점들이 있다. 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐할 컴포넌트가 많아지거나 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려워진다. 이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다.
다시 말해, 상태 관리는 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화 할 수 있고 상태 관리의 단계를 간결하게 해준다.
Vuex
정의
Vue.js의 상태 관리를 위한 패턴이자 라이브러리이다. 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다. 상태(state)를 저장하고 있는 저장소(store, 전역 상태가 저장되고 관리되는 공간)를 가지고 있다.
구성요소
- State : 컴포넌트 간에 공유하는 data
- View : 데이터를 표시하는 화면 template
- Action : 사용자의 입력에 따라 데이터를 변경하는 methods
흐름
View(Template)에서 버튼을 클릭했을때, 클릭이라는 Action(Method)이 발생하고, 해당 Action이 동작을 통해서 State(data)를 변경한다.
prop이나 ref 등으로 컴포넌트 간 데이터(상태)를 공유할 수 있는데 굳이 Vuex가 필요할까?
- 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우, 지나치게 중첩된 컴포넌트를 통과하는 prop이 생기게 된다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있다.
- 공통의 상태를 공유하기 때문에, 이 상태가 여러 컴포넌트에서 동일한 상태로 관리되어야 한다. Vue는 단방향으로 데이터가 흐르기때문에, 여러 컴포넌트가 한 상태를 공유하는 경우, 형제 컴포넌트간의 상태공유/관리가 복잡해질 수 있다.
🚨 주의
Vuex 는 store(저장소)를 가지고 있다. 즉, 상태(state)의 저장소를 가지고 있는 것인데, 이 저장소라는 말 때문에 Vuex가 세션/쿠키 localStorage 처럼 브라우저가 닫히지 않는 이상 계속 유지되는, Vuex 저장소에 상태(state)가 저장되는 것 처럼 느껴질 수 있다. 하지만 Vuex 의 상태는 메모리에 저장되는 것이기 때문에 새로 고침시 초기화 된다. Vuex는 컴포넌트 단위의 data() 가 그저 어플리케이션 단위의 data()가 된 것이라고 보면 된다. data()가 localStorage에 저장되진 않는다. 새로고침하면 당연히 초기화된다. 상태를 새로고침 시에도 유지 하고 싶다면 vuex-persistedstate(state - localstorage 동기화 라이브러리) 같은 또 다른 라이브러리가 필요하다.
