Vue.js 개발할 때 같이 사용하면 좋은 라이브러리

오늘은 Vuex, Axios에 대해 알아 보겠습니다. Vuex는 상태관리라이브러리 입니다. React 진영의 Redux와 유사합니다. 중앙 집중 방식의 애플리케이션 상태관리자로서 역할을 수행합니다. 공식가이드에는 대규모 애플리케이션을 제외하곤 그닥 성능상 이득을 볼 게 없다라고 적혀있지만, 컴포넌트간의 중복 문제 해결, 가독성, 일치성으로 인해 꼭 사용해야하는 라이브러리입니다. Vuex는 Vue의 핵심 라이브러리이기도 합니다.

반면, Axios는 우리의 뷰앱이 서버와 비동기통신을 할 때 사용하는 라이브러리입니다. 즉 자바스크립트의 XMLHttpRequest(XHR)을 쉽게 만들수 있도록 도와줍니다. React, Angular 웹 프레임워크에 상관없이 많이들 사용합니다.

그 밖에, 자동 JSON 변환 등 개발자들이 코딩을 덜 할 수 있도록 도와줍니다.

axios

Vuex

제가 앞서 포스팅한 컴포넌트 개발 을 보면 컴포넌트로만 개발하면 이벤트 전달, 데이터 참조가 얽히고 섥히듯 많이 일어납니다. 반면 이 상태관리라이브러리를 쓰면 FIRST원칙의 I, R원칙을 잘 지키며 개발할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

보통 Vuex는 Vue의 미들웨어 처럼 사용되기 때문에 Vue.use(Vuex)로 사용등록을 해주어야 합니다. 그리고 Store객체를 생성합니다. 또한 코드에는 안나왔는데 뷰 엔트리포인트(main.js)에 store를 등록해주어야 컴포넌트에서 $store로 접근할 수 있습니다.

Vuex는 다음 중요 세가지 요소로 구성됩니다.

• state -> 앱의 상태값, 변수에 해당함, 불린, 배열, 객체 등
• mutations -> state를 바꿈(동기식)
• actions -> state를 mutations를 context객체의 commit으로 호출함으로써 바꿈(비동기식) 예) axios 통신할때 사용

이렇게만 말해선 잘 와닿지 않을 것 같습니다. 다음 코드는 actions.js 파일을 모듈로 분리했다고 가정한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12

// actions.js
import {auth} from '../api'  // axios를 추상화 해놓은 폴더

const actions = {
  // LOGIN 액션은 로그인 컴포넌트의 method에서 호출
  LOGIN ({commit}, {email, password}){
    // auth.login API는 프로미스 객체 반환
    return auth.login(email, password)
    	// commit 으로 mutations.js에 있는 LOGIN 호출
    	.then(({accessToken}) => commit('LOGIN', accessToken))
  }
}

컴포넌트에서 store(Vuex 인스턴스)를 사용하는 관점

위에서 작성한 인증 API를 포함하는 actions를 어떻게 컴포넌트에서 사용하는지 보여주기 위한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// LoginComponent.vue
<template>
	<!-- 버튼에 onSubmit 이벤트를 달아놓음 -->
</template>

<script>
import {mapActions} from vuex
export default{
  data(){
    return {
      email: '',
      password: '',
    }
  },
  
  methods: {
    // ... 다음과 같이 ES6 문법의 spread 연산자를 사용하면 methods에 다른 함수도 추가 할 수 있음
    // mapActions는 헬퍼함수
    ...mapActions([
      // actions.js 에 등록해놓은 LOGIN
      'LOGIN'
    ]),
    onSubmit(){
      this.LOGIN({email:this.email, password:this.password})
      	.then(
        // 기타 로그인 후 로직처리
      	)
    }
  },
  
  
}
</script>


<style></style>

mapActions라는 헬퍼 함수를 사용하여 코드를 간결하게 작성했습니다. 물론 mapMutations를 포함 다양하게 헬퍼함수가 존재합니다.

정리

오늘은 vuex 생성하고 등록, state, mutations, actions를 중점으로 어떻게 앱 구조를 개선할 수 있는지 살펴봤습니다. 분량이 길어져 axios에 관한 내용은 다음 포스팅에서 다뤄보겠습니다.