[Vue] State Management

# State Management (= 상태 관리)

여기서 상태 == 데이터

Vue에서는 이미 반응형 상태를 관리하고 있었음

Vue의 컴포넌트를 세가지 상태로 나누면..

1) 상태(State)

 : 앱 구동에 필요한 기본 데이터

2) 뷰(view)
 : 상태를 선언적으로 매핑하여 시각화

3) 기능(Actions)

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

<template>
  <!-- 뷰(view) -->
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'

// 상태(state)
const count = ref(0)

// 기능(Actions)
const increment = function () {
  count.value ++
}
</script>

 

 

그리고 뷰에서는 단방향 데이터 흐름을 가지고 있음

근데, 이 단방향 데이터 흐름(상태 관리의 단순성)이 무너지는 시점이 있다

→ 여러 컴포넌트가 상태를 공유할 때

 

1. 여러 뷰가 동일한 상태에 종속되는 경우

• 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것
• 계층 구조가 깊어질 경우 비효율적이고 관리가 어려워진다

2. 서로 다른 뷰의 기능이 동일한 상태를 변경시켜야하는 경우

• 발신(emit)된 이벤트를 통해 상태의 여러 복사본을 변경 및 동기화하는 것
• 관리의 패턴이 깨지기 쉽고 유지보수가 어려워진다

 

그러면 어떻게 해결할 수 있을까?

각 컴포넌트의 공유 상태를 추출해서 전역에서 참조할 수 있는 저장소에서 관리하자

= Pinia 사용!

귀엽당

컴포넌트 트리는 하나의 큰 뷰가 되고,

모든 컴포넌트는 트리 계층 구조에 관계없이 상태에 접근하거나 기능을 사용할 수 있게됨

 

 

Pinia는 왜 써? props, emit만으로 다 해결할 수 있는데?

 

→ 컴포넌트끼리 관계가 복잡해지거나, 규모가 커졌을 때 쓰는 것

예를 들어, 할아버지의 9촌동생의 손자와 같은 데이터를 쓴다고 해보자

와아 그럼 props와 emit을 몇번을 해야하는거야.. 아찔..

그래서 전역 변수처럼 써서 관리하자 = Pinia