[Vue.js] Veux란?

Vuex란?

• 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴 + 라이브러리이다.
• React의 Flux 패턴에서 기인함

 

상태 관리(State Management)가 왜 필요한가?

• 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성한다.
• 예를 들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용한다.
• 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생깁니다.

 

상태 관리 패턴

• state : 컴포넌트 간에 공유할 data
• view : 데이터가 표현될 template
• actions : 사용자의 입력에 따라 반응할 methods

const Counter = {
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

위 구성 요소는 아래와 같이 그림으로 표현된다.

 

언제 사용해야 할까?

상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있다. 따라서 일반적으로 앱의 규모가 커지면서 생기는 문제점들은 다음과 같다.

1. 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐할 컴포넌트가 많아지거나
2. 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려운 것

이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다.

 

 

출처

• next.vuex.vuejs.org/#what-is-a-state-management-pattern