Vuex와 로컬 스토리지의 차이점 및 주요 활용 사례

1. Vuex와 브라우저 저장소(LocalStorage/SessionStorage)의 주요 차이

Vuex와 웹 스토리지(LocalStorage, SessionStorage)는 모두 데이터를 저장하는 용도로 사용되지만, 그 작동 방식과 목적에는 근본적인 차이가 있습니다.

저장 위치 및 휘발성: Vuex는 자바스크립트 실행 메모리(RAM)에 데이터를 저장합니다. 따라서 페이지를 새로고침(F5)하면 메모리가 초기화되어 데이터가 소멸됩니다. 반면, LocalStorage는 브라우저 하드디스크에 파일 형태로 저장되어 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 영구적으로 유지됩니다. SessionStorage는 탭을 닫을 때까지만 유지됩니다.
데이터 타입: Vuex는 자바스크립트 객체, 배열 등 모든 타입을 그대로 저장하고 관리할 수 있습니다. 하지만 웹 스토리지는 문자열(String) 타입만 지원하므로, 객체를 저장할 때는 JSON.stringify와 JSON.parse를 통한 직렬화 과정이 필수적입니다.
반응성(Reactivity): 가장 핵심적인 차이입니다. Vuex는 Vue의 반응성 시스템과 통합되어 있어 데이터가 변경되면 이를 참조하는 모든 컴포넌트가 즉시 감지하고 UI를 업데이트합니다. 반면, 로컬 스토리지는 데이터가 변하더라도 Vue 컴포넌트가 이를 실시간으로 감지하여 화면을 갱신하는 기능이 없습니다.

// 로컬 스토리지 데이터 처리 예시
const saveUser = (user) => {
  localStorage.setItem('userInfo', JSON.stringify(user));
};

const getUser = () => {
  return JSON.parse(localStorage.getItem('userInfo'));
};

// Vuex 데이터 처리 예시
// 스토어 내부의 상태가 변하면 컴포넌트의 computed 속성이 즉시 반영됨
this.$store.commit('SET_USER_INFO', userData);

2. Vuex의 주요 응용 시나리오

단순히 데이터를 저장하는 것을 넘어, Vuex가 반드시 필요한 상황들은 다음과 같습니다.

컴포넌트 소멸 후 데이터 보존

사용자가 입력 폼이 있는 모달이나 특정 페이지에서 데이터를 입력하다가 실수로 창을 닫거나 다른 메뉴로 이동하는 경우가 있습니다. 이때 컴포넌트가 unmounted(소멸)되면 내부 data는 사라집니다. 다시 컴포넌트가 생성되었을 때 이전 입력 상태를 유지해야 한다면 Vuex에 임시 저장하는 것이 가장 효율적입니다.

// 컴포넌트 소멸 시점에 상태 저장
beforeUnmount() {
  this.$store.dispatch('saveTemporaryDraft', this.formData);
}

// 컴포넌트 생성 시점에 상태 복구
created() {
  this.formData = this.$store.state.draftData;
}

비동기 데이터에 기반한 전역 UI 제어

사용자 로그인 직후 권한 정보(ACL)를 API로 가져오는 상황을 가정해 보겠습니다. 이 권한 데이터는 사이트 전체의 네비게이션 바, 버튼 노출 여부(v-if), 페이지 접근 권한 등 수많은 컴포넌트에 영향을 미칩니다. 특정 컴포넌트에서 이 데이터를 관리하면 다른 컴포넌트로 전달하기 매우 어렵지만, Vuex를 사용하면 중앙에서 비동기 로직(Actions)을 처리하고 전역으로 상태를 전파할 수 있습니다.

// Vuex Action에서의 비동기 처리
async fetchPermissions({ commit }) {
  const permissions = await api.getAuthList();
  commit('SET_PERMISSIONS', permissions);
}

// 컴포넌트에서의 활용
// <button v-if="$store.getters.isAdmin">관리자 설정</button>

다대다(Many-to-Many) 상태 동기화

다크 모드 설정이나 언어 팩 변경과 같이, 한 곳에서 발생한 이벤트가 애플리케이션의 수많은 곳에 동시에 반영되어야 하는 '다대다' 구조에서는 전역 상태 관리가 필수입니다. 글로벌 이벤트 버스를 사용할 수도 있으나, 규모가 커지면 흐름을 추적하기 어려워집니다. Vuex는 Getter를 통해 상태를 가공하여 공유하고, Mutation을 통해 변경 이력을 추적할 수 있어 유지보수에 유리합니다.

3. 결론: 선택 기준

데이터와 컴포넌트의 생명주기를 분리하여 독립적으로 관리해야 한다면 Vuex를 사용하는 것이 옳습니다. 반면, 특정 컴포넌트 내에서만 소비되고 사라지는 데이터는 컴포넌트 자체 data 속성에 두는 것이 복잡도를 낮추는 방법입니다. 또한, 새로고침 후에도 유지되어야 하는 설정값(로그인 토큰 등)은 Vuex와 로컬 스토리지를 혼합하여 사용하는 방식이 일반적입니다.

태그: Vue.js vuex localStorage State-Management Frontend-Development

8월 11일 13:27에 게시됨

괴물 클럽