μƒνƒœ 관리 μ†Œκ°œ

μƒνƒœ κ΄€λ¦¬λž€ ν˜„λŒ€ ν”„λŸ°νŠΈμ—”λ“œ ν”„λ ˆμž„μ›Œν¬μ—μ„œ λͺ¨λ‘ μ‚¬μš©ν•˜λŠ” 개발 νŒ¨ν„΄μž…λ‹ˆλ‹€. λ·°μ—μ„œλŠ” λ·°μ—‘μŠ€(Vuex)λΌλŠ” μƒνƒœ 관리 νŒ¨ν„΄μ„ μ‚¬μš©ν•©λ‹ˆλ‹€. μƒνƒœ 관리가 ν•„μš”ν•œ μ΄μœ λŠ” μ»΄ν¬λ„ŒνŠΈμ˜ μˆ«μžκ°€ λ§Žμ•„μ‘Œμ„ λ•Œ μ»΄ν¬λ„ŒνŠΈ κ°„μ˜ 데이터 μ „λ‹¬μ΄λ‚˜ 관리가 μ–΄λ ΅κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. 데이터 전달을 더 λͺ…μ‹œμ μ΄κ³  효율적으둜 ν•˜κΈ° μœ„ν•œ 방법이 μƒνƒœ κ΄€λ¦¬μž…λ‹ˆλ‹€.

λ·°μ—‘μŠ€ μ†Œκ°œ

λ·°μ—‘μŠ€λž€ 뷰의 μƒνƒœ 관리 νŒ¨ν„΄μ΄μž λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. μ•„λž˜λŠ” λ·°μ—‘μŠ€μ˜ κ°œλ…μ„ λ‹¨μˆœν•˜κ²Œ λ„μ‹ν™”ν•œ κ·Έλ¦Όμž…λ‹ˆλ‹€.

λ·°μ—‘μŠ€ 컨셉

ν™”λ©΄(View) -> ν™”λ©΄μ—μ„œμ˜ 이벀트 λ°œμƒ(Actions) -> 데이터 λ³€κ²½(State)의 단방ν–₯ 데이터 흐름이 νŠΉμ§•μž…λ‹ˆλ‹€.

λ·°μ—‘μŠ€ 기술 μš”μ†Œ

λ·°μ—‘μŠ€μ˜ μ£Όμš” 기술 μš”μ†ŒλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • state
  • getters
  • mutations
  • actions

각 속성에 λŒ€ν•œ μžμ„Έν•œ μ„€λͺ…은 ν•΄λ‹Ή μ±•ν„°μ—μ„œ ν™•μΈν•˜κ² μŠ΅λ‹ˆλ‹€.

λ·°μ—‘μŠ€ μ„€μΉ˜

λ·°μ—‘μ„œλ₯Ό ν”„λ‘œμ νŠΈμ— μ„€μΉ˜ν•˜κΈ° μœ„ν•΄μ„œ μ•„λž˜μ˜ 방법을 λ”°λ¦…λ‹ˆλ‹€.

CDN 방식

<script src="https://unpkg.com/vuex"></script>

NPM 방식

npm install vuex --save

λ·°μ—‘μŠ€ 등둝

λ·°μ—‘μŠ€λ₯Ό λ“±λ‘ν•˜κΈ° μœ„ν•΄μ„œλŠ” λ·° λΌμš°ν„°μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ λ·° μŠ€ν† μ–΄λ₯Ό ν•˜λ‚˜ 생성해야 ν•©λ‹ˆλ‹€.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  // ..
});

λ·° μŠ€ν† μ–΄λ₯Ό ν•˜λ‚˜ μƒμ„±ν•˜κ³  λ‚˜μ„œ ES6 import/export λ¬Έλ²•μœΌλ‘œ main.js 파일의 μΈμŠ€ν„΄μŠ€μ— μ£Όμž…ν•©λ‹ˆλ‹€.

// main.js
import Vue from 'vue';
import { store } from './store.js';

new Vue({
  store: store
})

λ·°μ—‘μŠ€ ꡬ쑰도

λ·°μ—‘μŠ€μ˜ 전체 흐름을 λ‚˜νƒ€λ‚Έ κ·Έλ¦Όμž…λ‹ˆλ‹€.

λ·°μ—‘μŠ€ 컨셉

λ°μ΄ν„°μ˜ 흐름은 Actions -> Mutations -> State μˆœμ„œμž„μ„ μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.