상태 관리 패턴

상태 관리의 필요성

오늘 날 프론트엔드 프레임워크를 활용한 개발은 컴포넌트 중심으로 설계됩니다. 각 컴포넌트는 독립적으로 데이터를 관리하기에 컴포넌트 간 데이터를 공유하고 관리하기 쉽지 않습니다.

이러한 문제를 해결하는 개발 패턴이 "상태 관리" 입니다. 컴포넌트 기반으로 구성된 Vue 애플리케이션의 데이터를 한데 모아 중앙에서 효과적이고 명시적으로 관리하기 위한 상태 관리 개발 방법이 필요합니다.

Vuex는 Vue 애플리케이션의 상태 관리 패턴 + 라이브러리 입니다.

Vue 애플리케이션의 데이터 관리 흐름은 단방향 입니다. 뷰에서 액션을 실행하면, 액션은 스테이트를 변경하고, 스테이트가 변경되면 뷰가 업데이트 됩니다. 아래 그림은 이러한 흐름을 잘 표편하고 있습니다.

Vuex를 구성하는 요소는 다음과 같습니다. 각 요소는 튜토리얼을 실습하며 자세히 살펴 보겠습니다.

Vuex의 전체적인 작동 방식을 표현한 이미지로 흐름을 이해하기 쉽습니다.