{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-vuex의-개념-및-구조의-이해/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"89455268-6a83-5e19-b2aa-6aa1cf841a13","excerpt":"Vue Js Vuex의 개념 및 구조의 이해 Vuex Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. 상태 관리(State…","html":"

\"Vue

\n

Vuex

\n

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.

\n

상태 관리(State Management)가 필요한 이유

\n

컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성한다. 예를 들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용한다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다.

\n

상태 관리

\n

상태 관리란 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴을 의미한다. 뷰와 성격이 비슷한 프레임워크인 리액트(React)에서는 Redux, Mobx와 같은 상태 관리 라이브러리를 사용하고 있고 뷰에서는 Vuex라는 상태 관리 라이브러리를 사용한다.

\n

상태 관리로 해결할 수 있는 문제점

\n

상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있다. 일반적으로 앱의 규모가 커지면서 생기는 문제점들은 아래와 같다.

\n\n

위 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리이다.

\n

Vuex 전체 흐름도\n\"Vue

\n

상태 관리 패턴

\n

상태 관리 구성요소는 크게 3가지가 있다.

\n\n
<!-- view -->\n<template>\n  <div class=\"vuex\">\n    <h1>아메리카노 : {{ counter }}</h1>\n    <button @click=\"ameriano\">ameriano</button>\n  </div>\n</template>\n\n<script>\n  export default {\n    // state\n    data() {\n      return {\n        counter: 0,\n      }\n    },\n    // actions\n    methods: {\n      ameriano() {\n        this.counter++\n      },\n    },\n  }\n</script>
\n

\"Vue

\n

위 구성요소는 아래와 같은 흐름으로 동작한다.

\n

단방향 흐름 처리를 나타낸 그림\n\"Vue

\n

데모\nhttps://codepen.io/bottlehs/pen/ZELyXba

","tableOfContents":"","wordCount":{"words":252},"fields":{"slug":"/vue/vue-js-vuex의-개념-및-구조의-이해/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js Vuex의 개념 및 구조의 이해","date":"2021년 4월 4일","dateISO":"2021-04-04T19:11:34.709Z","updatedISO":null,"category":"vue","description":"Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.","tags":["vue","javascript","framework","frontend","web","router"]}}},"pageContext":{"slug":"/vue/vue-js-vuex의-개념-및-구조의-이해/","previous":{"fields":{"slug":"/vue/vue-js-네임드-라우트/"},"frontmatter":{"title":"Vue Js 뷰 네임드 라우트","tags":["vue","javascript","framework","frontend","web","router","named-routes"]}},"next":{"fields":{"slug":"/springboot/스프링-부트-API-인터페이스-및-결과-데이터-구조-설계/"},"frontmatter":{"title":"스프링 부트 API 인터페이스 및 결과 데이터 구조 설계","tags":["스프링","스프링부트","Spring","SpringBoot","Java","프레임워크","스프링부트구조","아키텍쳐"]}}}},"staticQueryHashes":["213619243","3262363727"]}