상태 관리(State Management)

상태 관리는 여러 컴포넌트 간의 데이터 전달, 통신을 한곳에서 하는 것을 말한다.
리액트에서는 Redux, Mobx와 같은 라이브러리를 사용하고, 뷰에서는 vuex를 사용한다.

상태 관리 사용하는 이유

컴포넌트 기반 프레임 워크에서는 쪼개진 컴포넌트간 통신을 해야하는데, 이때 데이터 전달을 좀 더 편하게 관리하기 위해서이다.

Vuex란?

vue의 상태 관리를 위한 라이브러리이다. 리액트와 비교 했을 때, 뷰의 반응성을 효율적으로 활용해 화면을 업데이트 한다는 차이가 있다.

상태관리 패턴

store안에는

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

아래와 같이 단방향 데이터 흐름을 가진다.

store

<script>
export default {
  // state
  data() {
    return {
      count: 0
    }
  },
  // actions
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<!-- view -->
<template>{{ count }}</template>

Vue Reactivity(뷰의 반응성)

• Vue가 데이터 변화를 감지하고 자동으로 화면을 갱신하는 특성을 말한다.
• 반응성이 없다는 것은 화면을 다시 갱신하지 않는다는 의미이다.

getter / setter
getter, setter는 인스턴스에 정의해 놓은 데이터가 변경될 때 감지하기 위한 내부적 속성이다.

watcher
모든 컴포넌트에 존재하는 속성, 화면을 그리는데 중요한 역할을 한다.
인스턴스가 화면에 올라가고 데이터를 변경하면 watcher에서 변경을 감시하여 신호를 보낸다.