[TIL] 190718

오늘 한 일

• 내일 윤아씨와 약속이 있기 때문에 전에 받았던 소스를 분석해보고자 급 Vue.js 공부를 시작했다.
• Vuex에 대해 검색하다가 인프런에 있는 캡틴판교님의 Vue.js 완벽 가이드 강의를 급 결제함.
• 강의 듣기 전, Vuex 공식문서를 일단 한 번 읽어보기로 함.

공부 내용

Vuex

Vuex는 Vue.js를 위한 상태 관리 저장소이다. 한마디로 모든 컴포넌트가 접근 가능한 상태값이 저장되어 있는 전역 저장소!

이것은 반응형이라서 저장소 내의 상태가 변경되면 해당 상태를 의존하는 컴포넌트들이 모두 업데이트 된다.

이것에는 5가지 핵심 컨셉이 있다.

 

1. State

Vuex는 단일 상태 트리로서 하나의 어플리케이션에는 하나의 상태 저장소만 존재한다.

저장소에 접근할 때는 'store.state.상태명' 또는 루트 인스턴스에 제공되는 store값을 통해 'this.$store.state.상태명' 이런 식으로 가능하다.

또는 mapState라는 헬퍼를 통해 일일히 매치해주지 않고 이름만 명시해주거나 또는 계산된 값을 얻고 싶을때 유용하다. 객체를 반환하기 때문에 ES6 문법에 추가된 객체 전개 연산자를 이용해 로컬 상태값들과 쉽게 합칠 수 있다.

 

2. Getters

저장소 상태를 기반으로 계산한 값이 필요할 때 사용한다. 의존하는 상태값이 변경되면 getters값도 변경된다. 그러나 Vue.js에서 computed 속성처럼 값을 캐시해두고 종속성이 변경된 경우에만 다시 계산된다.

store.getters로 접근 가능하다. 상태와 마찬가지로 mapGetters 헬퍼가 존재하고 객체를 반환한다.

 

3. Mutations

변이라고 불리는 이것은 상태값을 변경할 수 있는 유일한 방법이다. 상태값은 직접 변경이 불가능 하고 store.commit 함수를 통해서만 변경이 가능하다.

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 상태 변이
      state.count++
    }
  }
})

/* 컴포넌트 내에서 사용 시 */
store.commit('increment')

위 코드에서처럼 저장소의 mutations 속성에 상태값을 변경할 함수를 정의해주고 컴포넌트 내에서 사용할 때에는 store.commit의 인자로 해당 함수 이름을 넘겨준다. payload(페이로드)라고 하는 추가인자를 넘겨주는 것도 가능하다.

그리고 Mutations에 정의해준 함수들은 무조건 동기적이어야 한다. 그렇지 않으면 콜백 함수 호출 시기를 모르기 때문에 상태값 변화를 추적할 수 없다. 비동기로 상태값을 변경하려면 다음에 나오는 Actions을 사용해야 한다.

여기에도 mapMutations 헬퍼가 존재한다. 컴포넌트 내에 methods 속성 안에서 매치 가능하다.

 

4. Actions

액션은 변이와 유사하지만 액션에서는 실제로 상태값을 변경하는 것이 아니고 변이 함수 (store.commit)을 이용해서 변경한다. 그리고 비동기 작업이 가능하다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

위의 코드처럼 mutations과 actions을 모두 정의해주고 액션에서는 변이를 이용해 상태값을 커밋한다. 그리고 액션은 context라는 객체를 받는데 이것은 저장소 인스턴스 내부에 있는 메소드/프로퍼티들을 전부 포함한다.

액션은 store.dispatch 을 통해 접근 가능하다. 액션 내에서 비동기 API호출이나 여러개의 변이 커밋이 가능하다. 또한 mapActions이라는 헬퍼가 있고 변이와 마찬가지로 컴포넌트 내의 methods 속성 안에서 매치 가능하다.

액션에서 비동기 구성은 Promise와 async/await 모두 가능하다. 이 부분은 아직 내가 공부가 더 필요하므로 이정도만 적어두겠다.

 

느낀점

문서양이 얼마 안되서 후딱 읽고 강의를 들으려고 했으나, 문서 정리가 생각보다 잘 되어있고 나도 이해하려고 꼼꼼히 읽다보니 하루가 다 갔다. Vuex만 해도 이만큼인데, 앞으로 axios도 해야하고 갈 길이 멀다. 그래도 Vue.js는 실무경험이 있다보니 새로운 걸 접해도 아 이게 이럴때 편하겠구나, 이걸 쓰면 더 효율적이겠구나 이런게 좀 눈에 보이는 것 같다. 물론 다른 라이브러리도 마찬가지겠지만 리액트는 왜인지 계속 공부해도 손에 잡히지 않는 느낌이 든다. 아무튼 일단 뷰를 잡은만큼 내일부터 빠르게 강의를 들어봐야겠다.