참고자료 |
상태 관리의 필요성 - Medium
Vue.js의 새로운 상태 관리 라이브러리 Pinia
Vue3, Composition API와 Pinia를 이용한 상태관리(1) - 사람인 기술 블로그
Vue3, Composition API와 Pinia를 이용한 상태관리(2) - 사람인 기술 블로그

🍍 vue에서 사용하는 상태관리 툴 pinia에 대한 개념 및 사용법 정리

상태(state)

상태란, 어떠한 의미를 지닌 값이며, 외부 요인에 따라 지속적으로 변경될 수 있는 값을 의미한다.

• UI : 컴퓨터, 시스템, 기기, 도구 등 사람과 상호작용이 가능한 모든 요소의 값
• URL : 브라우저에서 관리되고 있는 상태 값 (사용자의 라우팅, 즉 어디로 이동하냐 따라 변경될 수 있음)
• form : loading, submit, disabled, validation 등의 폼 상태 값
• API : 클라이언트에서 서버로 요청을 통해 가져온 값 (API 요청)

🍍 Pinia

Pinia는 Vue3의 핵심인 Composition API에 적합한 형태로 만들어진 Vue의 상태 관리 라이브러리이다. (기존에 Vue2를 사용하던 당시에는 Vuex를 주로 사용했으나, Vue3부터는 Pinia가 공식적으로 추천하는 라이브러리가 되었다.)

Vue3 기반의 setup() 함수와 친화적이며, Typescript 기반이기 때문에 Type에 대한 안정성이 보장된다.
또한, localstorage로 확장 가능, Devtool 지원, 적은 용량, 모듈화 등의 장점이 있다.

• 가볍고 직관적인 API
• TypeScript와의 호환성
• 컴포넌트별 상태 관리로 상태관리 편리성
• 유연한 상태 관리
• 성능 최적화에 용이함

Store

store란?
store는 컴포넌트 트리에 바인딩되지 않은 상태 및 처리해야 할 일의 로직을 가지는 독립적인 공간을 뜻함.
전역 상태를 호스팅하기 때문에 항상 존재하고 모두가 읽고 쓸 수 있는 컴포넌트와 비슷하다.
state, getters, action 이라는 세 가지 개념이 있으며, 컴포넌트의 data, computed, methods 와 동일하다고 가정해도 무방하다.

defineStore() 메소드를 통해 각 store의 id 및 옵션(state, getters, actions)를 정의한다.
Store 객체는 use+id+Store 키워드의 조합으로 이름을 붙여 export하는 방식이 권장됨

예시)

다음은 사람인에서 사용한 필터링 기능 관련 store 정의 코드의 일부이다. (setup store 방식)

export const useSearchConditionsStore = defineStore("searchConditions", () => {
      // ref()는 state 속성
      const conditions = ref(deepCopy(defaultFilterState));
 
      // getters
      const getFilters = computed(() => conditions.value);

      // actions
      const updateFilters = (filters) => {};
 
      const resetFilters = () => {};

      return {
          conditions,
          getFilters,
          updateFilters,
          resetFilters
      };
});

이렇게 정의된 스토어의 상태값은 모든 컴포넌트에서 전역적으로 접근 가능하며, 어느 곳에서 접근해도 동일한 상태를 유지하는 공통의 상태 값이 된다.
더 자세한 코드는 사람인 기술 블로그에서 확인 가능!