Vuex가 뭔가요?

1 개요

Vuex가 뭔가요?

• Vuex는 Vue.js 애플리케이션용 상태 관리 패턴 + 라이브러리이다.
• 애플리케이션의 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며, 예측가능한 방식으로만 상태를 변이시킬 수 있게 강제한다.
• 또한 Vue의 공식 devtools 확장 프로그램과 연동되어 무설정 시간여행 디버깅 및 상태 스냅샷 내보내기/들여오기 같은 고급 기능을 제공한다.

2 "상태 관리 패턴"이 뭔가요?

간단한 Vue 카운터 앱부터 시작해보자.

new Vue({
  // 상태
  data () {
    return {
      count: 0
    }
  },
  // 뷰
  template: `
    <div>{{ count }}</div>
  `,
  // 액션
  methods: {
    increment () {
      this.count++
    }
  }
})

이것은 다음과 같은 부분들을 가진 앱이다.

• 상태는 앱을 작동하는 원본 소스이다.
• 뷰는 상태의 선언적 매핑이다.
• 액션은 뷰에서의 사용자 입력에 반응하여 상태를 변화시키는 방법이다.

다음은 "단방향 데이터 흐름" 개념의 단순한 도표이다.

• 그러나 여러 컴포넌트가 하나의 공통 상태를 공유하는 경우 단순성은 쉽게 훼손된다.
  • 여러 뷰가 동일한 상태(state)에 의존한다.
  • 서로 다른 뷰에서의 액션들이 동일한 상태(state)를 변이시킬 필요가 있다.
• 첫번째 문제의 경우, 깊게 중첩된 컴포넌트에 전달되는 props는 장황할 수 있고, 형제 컴포넌트에서는 작동하지 않는다.
• 두번째 문제의 경우, 우리는 종종 직접 부모/자식 인스턴스 참조를 얻거나, 이벤트를 통해 상태의 복사본들을 변이·동기화하여 해결방법을 찾으려고 한다.
• 이러한 패턴은 망가지기 쉬으며, 유지보수 불가능한 코드로 바뀌기도 쉽다.
• 따라서 컴포넌트에서 공유된 상태를 추출해내고, 글로벌 싱글턴 내에서 관리하도록 하자.
• 이를 통해, 컴포넌트 트리는 커다란 "뷰"가 되며, 모든 컴포넌트들은 트리의 어디에 있든 상태에 접근하거나 액션을 트리거할 수 있다!
• 상태 관리에 관한 개념을 정의하고 view와 state들간의 독립성 규칙을 적용·격리함으로써, 코드는 더 구조화되고 유지보수도 용이해진다.
• 이것이 Flux, Redux, The Elm Architecture에서 영감을 받은 Vuex의 기본 아이디어이다.
• 다른 패턴들과는 달리 Vuex는 또한 Vue.js가 효율적인 업데이트를 위해 세분화된 반응성 시스템을 활용하도록 특별히 고안된 라이브러리 구현체이다.

• 인터랙티브 방식으로 Vuex를 배우고 싶다면, 언제든 일시중지·재생 가능한 스크린캐스트·코드 놀이터 조합을 제공하는 Scrimba의 Vuex 과정을 알아 보자.

3 언제 사용하나요?

• Vuex는 공유된 상태 관리를 다루는데 도움이 되지만, 개념과 구문을 알아야 한다는 부담도 있다.
• 따라서 단기·장기 생산성 사이의 트레이드-오프가 있다.
• 대규모 SPA를 구축해본 적 없이 바로 Vuex로 넘어왔다면, 장황하고 버거운 느낌을 받을 수 있다.
• 그것은 정상적인 일이다.
• 앱이 단순하다면, 대부분 Vuex가 없이도 괜찮을 것이다.
• 간단한 store 패턴만 필요할 수도 있다.
• 그러나 중대형 SPA를 구축하는 경우, Vue 컴포넌트 외부의 상태를 잘 처리할 방법을 고민하는 상황이 된다면 자연스럽게 Vuex 단계로 넘어갈 수 있다.
• Redux의 저자 Dan Abramov의 좋은 인용구가 있다.

참고:

Flux 라이브러리는 안경과 같다: 필요할 때를 알게 될거다.

4 같이 보기

• Vuex