Vuex 기초
Vuex 스토어와 중앙 집중식 상태를 이해합니다.
Vuex 기초은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
중앙 집중식 상태가 필요한 이유
Vue app이 커지면 여러 컴포넌트 사이에서 데이터를 공유하기가 어려워집니다. 깊게 중첩된 트리에서 속성을 아래로 전달하고 이벤트를 위로 발생시키는 방식은 불안정합니다. 뷰엑스는 모든 컴포넌트가 예측 가능한 방식으로 읽고 쓸 수 있는 하나의 중앙 집중식 store를 제공하여 이 문제를 해결합니다.
단일 진실 공급원
뷰엑스는 단방향 데이터 흐름을 따릅니다. 공유되는 모든 애플리케이션 상태는 store라는 한 곳에 저장됩니다. 컴포넌트는 store에서 상태를 읽고 제어된 인터페이스를 통해 변경을 요청하므로 데이터의 출처와 변경 방식을 항상 알 수 있습니다.
뷰엑스 설치
뷰엑스 4는 Vue 3용으로 만들어진 버전입니다. 패키지 관리자로 설치한 다음 store를 만들고 app에 등록하세요.
npm install vuex@4store 만들기
createStore를 사용해 store를 정의하세요. 상태 옵션은 초기 반응형 상태 객체를 반환하는 함수입니다.
import { createStore } from "vuex"
export const store = createStore({
state() {
return {
count: 0,
user: null
}
}
})store 등록
app.use(store)를 사용해 app에 store를 전달하세요. 그러면 모든 컴포넌트에서 this.$store를 통해 store를 사용할 수 있습니다.
import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"
const app = createApp(App)
app.use(store)
app.mount("#app")상태 속성
state 객체에는 애플리케이션 데이터가 저장됩니다. 이 객체는 반응형이므로 상태가 변경되면 이를 사용하는 모든 컴포넌트가 자동으로 다시 렌더링됩니다. 전체 app의 데이터 함수라고 생각하면 됩니다.
state() {
return {
todos: [],
isLoading: false,
theme: "light"
}
}옵션 인터페이스에서 상태에 접근하기
컴포넌트 내부에서는 this.$store.state를 통해 store에 접근합니다. 계산 속성을 사용하면 값의 반응성이 유지됩니다.
export default {
computed: {
count() {
return this.$store.state.count
}
}
}템플릿에서 상태 사용하기
계산 속성을 통해 노출한 상태는 템플릿에서 다른 로컬 값과 같은 방식으로 사용할 수 있습니다.
<template>
<p>Current count: {{ count }}</p>
</template>mapState 도우미
계산 속성을 여러 개 직접 작성하면 반복 작업이 많아집니다. mapState 도우미는 상태 이름 배열을 바탕으로 계산 속성을 자동으로 만들어 줍니다.
import { mapState } from "vuex"
export default {
computed: {
...mapState(["count", "user"])
}
}이름을 바꾸어 사용하는 mapState
속성의 이름을 바꾸거나 상태에서 파생된 값을 계산하려면 mapState에 객체를 전달하세요.
computed: {
...mapState({
total: "count",
userName: (state) => state.user ? state.user.name : "Guest"
})
}컴포지션 인터페이스에서 상태에 접근하기
컴포지션 인터페이스에서는 setup 내부에서 useStore()를 호출해 store 인스턴스를 가져온 다음 계산 속성을 통해 상태를 읽습니다.
import { computed } from "vue"
import { useStore } from "vuex"
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
return { count }
}
}빠른 확인
뷰엑스의 기본 개념에 대해 이해한 내용을 확인해 보세요.
다시 보기
뷰엑스는 단일 진실 공급원 역할을 하는 중앙 집중식 반응형 store를 제공합니다. createStore로 만들고 app.use를 통해 등록한 다음 계산 속성이나 mapState 도우미로 state를 읽습니다. 컴포지션 인터페이스에서는 useStore()로 store에 접근합니다. 다음에는 이 상태를 안전하게 변경하는 방법을 배웁니다.
자주 묻는 질문
“Vuex 기초” 강의는 무료인가요?
네 — “Vuex 기초” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“Vuex 기초”에서 뭘 배우나요?
Vuex 스토어와 중앙 집중식 상태를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.
“Vuex 기초” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Vuex 기초
- Mutation과 Action
- Getter와 모듈