단일 상태 트리란?

공식 도큐멘트를 보면 단일 상태 트리에 대해 아래와 같이 설명하고 있다.

Vuex는 단일 상태 트리 를 사용합니다. 즉, 이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 “원본 소스” 역할을 합니다. 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미합니다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있습니다. 단일 상태 트리는 모듈성과 충돌하지 않습니다. 나중에 상태와 변이를 하위 모듈로 분할하는 방법에 대해 설명합니다.

간단히 말하면 uniq하다는 얘기다.

예를들어 여자친구라는 배열0,1,2에 사나,다현,모모를 집어넣는다고 해보자.

보통 javascript라면 각 배열에 대입시 변수값이 복사되어 사나,다현,모모가 표시될것이다.

const 여자친구 = []
let 여자 = ''
여자 = '사나'
여자친구[0] = 여자
여자 = '다현'
여자친구[1] = 여자
여자 = '모모'
여자친구[2] = 여자
console.log('여자친구:',여자친구)
=> ['사나','다현','모모']

그런데 state는 원본 소스(single source of truth)의 역할을 가지므로 배열0,1,2에는 각각 마지막 여자 변수에 대입했던 모모가 들어가 있을것이다.

state.여자친구 = []

state.여자 = '사나'
state.여자친구[0] = state.여자
state.여자 = '다현'
state.여자친구[1] = state.여자
state.여자 = '모모'
state.여자친구[2] = state.여자
console.log('여자친구:',state.여자친구)
=> ['모모','모모','모모']

객체복사시의 참조할당하는것과 같은 원리인것 같다.

단일 상태 트리는 모듈성과 충돌하지 않는다는 의미

공식 도큐멘트의 단일 상태 트리에 대한 설명중

단일 상태 트리는 모듈성과 충돌하지 않습니다.

라는 말이 있는데 무슨의미냐면

store는 모듈별로 나눌 수 있는데 나누어진 module간에서도 state는 단일 상태 트리를 유지한다는 것이다.

예를들어 A모듈에 state.여자친구가 있고 B모듈에 state.여자가 있어도 위에서 설명한 동작과 차이가 없다.

• ← Previous Post
• Next Post →