Vue : State Management

• State Management = 상태 관리

Vue 컴포넌트는 이미 반응형 상태를 관리하고 있다.

→ 상태 = 데이터

 

• 컴포넌트 구조

상태(State) - 앱 구동에 필요한 기본 데이터

뷰(View) - 상태를 선언적으로 매핑하여 시각화

기능(Actions) - 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작

 

상태 관리의 단순성이 무너지는 시점

⇒

여러 컴포넌트가 동일한 상태(데이터)를 출력해야 하는 경우, 계층 구조가 깊어지면 prop이 중첩되면서 코드가 비효율적이고 관리가 어려워진다.

여러 컴포넌트가 동일한 상태(데이터)를 변경시킬 경우 앞의 경우와 반대로 emit 이 중첩되면서 관리 패턴이 깨지게 된다.

⇒ 해결책 : 계층구조를 막론하고 모든 컴포넌트(전역)에서 참조하고 데이터를 직접 가져올 수 있는 중앙저장소를 만들자!

 

• Pinia

Vue 공식 상태 관리 라이브러리

Pinia가 상태를 규정하거나 상태를 함수로 계산하는 Action 과 State 를 하나로 묶어준다.

 

• Pinia 구성 요소

1. store

중앙 저장소

모든 컴포넌트가 공유하는 상태, 기능 등이 작성된다.

defineStore() 의 반환 값의 이름은 use 와 store 를 사용하는 것을 권장한다.

defineStore() 의 첫번째 인자는 애플리케이션 전체에 걸쳐 사용하는 store의 고유 ID이다.

 

2. state

반응형 상태(데이터)

= ref()

각 컴포넌트 깊이에 관계 없이 store 인스턴스로 state에 접근하여 직접 읽고 쓸 수 있다.

컴포넌트에서 store의 state를 새로 추가할 수는 없다.

 

3. getters

계산된 값

= computed()

store의 모든 getters 또한 state 처럼 직접 접근할 수 있다.

 

4. actions

메서드

= function()

store의 모든 actions 또한 직접 접근 및 호출할 수 있다.

getters와 달리 state 조작, 비동기, API 호출이나 다른 로직을 진행할 수 있다.

 

⇒ pinia의 상태들을 사용하려면 반드시 반환해야 한다. 공유하지 않는 상태 속성은 가지지 않는다.

 

5. plugin

애플리케이션의 상태 관리에 필요한 추가 기능을 제공하거나 확장하는 도구, 모듈

애플리케이션의 상태 관리를 더욱 간편하고 유연하게 만들어주며, 패키지 매니저로 설치 이후 별도 설정을 통해 추가된다.

 

• Local Storage

브라우저 내에 key-value 쌍을 저장하는 웹 스토리지 객체

 

페이지를 새로고침하고 브라우저를 다시 실행해도 데이터를 유지한다.

쿠키와 달리 네트워크 요청 시 서버로 전송되지 않는다.

여러 탭이나 창 간에 데이터를 공유할 수 있다.

 

웹 애플리케이션에서 사용자 설정, 상태 정보, 캐시 데이터 등을 클라이언트 측에서 보관하여 웹 사이트의 성능을 향상시키고 사용자 경험을 개선하기 위해 사용한다.

 

• pinia-plugin-persistedstate

Pinia 의 플러그인 중 하나

웹 애플리케이션의 상태를 브라우저의 local storage나 session storage에 영구적으로 저장하고 복원하는 기능을 제공한다.

 

Pinia를 사용한다고 모든 데이터를 state에 넣어야 하는 것은 아니다.

pass props, emit event 를 상황에 따라 적절히 함께 사용하여 애플리케이션을 구성한다.

Pinia는 공유된 상태를 관리하는 데 유용하지만, 구조적인 개념에 대한 이해와 시작 비용이 크다. 오히려 애플리케이션이 단순하면 Pinia가 없는 것이 더 효율적일 수도 있다.

중대형 규모의 SPA를 구축하는 등의 경우에 자연스럽게 Pinia를 사용하게 된다.

적절한 상황에서 Pinia를 활용해야 효용이 극대화 된다.