SPA - 상태 관리 (Vuex)

상태 관리

SPA 라이브러리나, 프레임워크에서 상태(state)는 부모-자식 컴포넌트 간에 props로 공유가 가능하다.

컴포넌트 관계가 간단하게 구성되어 있다면 props 전달과 관리가 어렵지 않겠지만

아래와 같이 복잡하게 구성되어 있다면 props를 통해 모든 데이터를 전달해야 하는 문제가 있다.

중앙 상태 관리

• 라이브러리나 프레임워크마다 명칭은 다르지만, 중앙 집중화 시켜 상태 관리를 하는 라이브러리가 있다.
• 중앙 저장소를 통해 관리하고 여러 부분에서 공유되기 때문에 상태의 일관성이 향상된다.
  • 단, SPA와 상태 관리 라이브러리 모두 비동기적으로 실행되기 때문에 일관성을 보장하진 않는다.
• 상태의 출처가 한 곳이기 때문에 컴포넌트간 데이터 흐름 추적과, 예측 가능성이 향상된다.
• 반복되는 코드를 줄일 수 있어 유지보수에 용이하다.
• 정의된 행위에 메서드를 정의해서 사용한다.
• 모든 state는 store에 보관된다
• 중앙 상태 관리소에 정의된 state는 중앙 상태 관리자를 통해서만 수정이 된다.

vuex

• state
  • 상태를 정의
    • 사용할 데이터 정의
  • state를 통해 상태(데이터)에 접근할 수 있다.
  • computed를 통해 접근
  • state는 mutations을 통해서만 변경이 가능하다.
• getters
  • state를 가공해서 반환
    • 가공한 값은 변수에 저장하지 않고 바로 반환한다. (Java의 Stream과 유사)
  • 여러 컴포넌트에서 동일하게 사용되는 변환 로직을 중복해서 작성할 필요가 사라진다.
  • 값은 캐시되기 때문에 성능 향상에 도움
  • computed를 통해 접근
• mutations
  • 상태에 접근해서 값을 바꾸는 동작
  • methods를 통해 접근
  • 동기로 작동
  • 단독 사용 가능
• actions
  • mutatuins을 실행시켜 메서드를 활용해서 값을 바꾸는 동작
  • actions에 정의한 메서드는 비동기로 작동하는 특성을 가진다.
  • methods를 통해 접근
• modules
  • vuex를 사용하기 위해 정의한 파일들을 한 곳에 관리하면 가독성이 저하되기 때문에 모듈화로 시켜 관리 가능
  • vuex를 정의한 메인 파일에 import 시켜 사용 가능