Vuex
뷰엑스는 상태관리를 돕는 라이브러리.
상태(state)란?
특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 상태(state)
컴포넌트가 너무 많을 때 props로 데이터를 전달한다고 하면 모든 컴포넌트에 props를 설정해줘야 한다.
이때 데이터 이름을 바꾸기라도 하면 손이 많이 가고 힘들어 질 것..🤣🤣
props 대신 이벤트 버스를 활용하면 어떨까?.. 상하위간의 데이터 전달 구조를 따르지 않고 바로 원하는 컴포넌트로 보낼 수 있어 쉽게 전달할 수 있을 것이다. 하지만 ....! 단방향 데이터 흐름이 아닌 셀 수 없이 많은 데이터 흐름이 될 것임!!!! 🤯🤯
만약 20-30개 정도의 컴포넌트 가진 웹앱을 제작한다고 하면 .. 이건 오바일 것😅 .. 이럴 때 필요한 게 바로 상태관리이다.
애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 데이터 관리를 효율적으로 하게 해줌.
뷰의 반응성(Vue Reactivity)
뷰의 반응성은 뷰가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성
뷰로 애플리케이션을 구현하려면 인스턴스를 생성해야 함. 인스턴스가 생성될 때 data 속성에 정의된 객체들은 특정 변환 작업을 거침.
라이브러리에서 data에 정의된 모든 속성(객체)를 getter, setter의 형태로 변환하는 것
getter, setter는 뷰 인스턴스에 정의해 놓은 data 속성에 변화가 생길 때 뷰에서 감지하기 위해 라이브러리 내부적으로 필요한 속성
watcher는 모든 컴포넌트에 존재하는 속성이고, 화면을 다시 그리는 데 중요한 역할을 한다. 예를 들어, 인스턴스가 화면에 올라가고 나서 특정 data 속성을 바꾸거나 접근하면 watcher에서 해당 사실을 감지하고 다시 화면을 그리라는 신호를 보낸다.
인스턴스 data 속성에 반응성이 생기는 시점은 인스턴스를 생성하는 시점이다.
따라서 인스턴스를 정의할 때 data 속성에 정의하지 않고 인스턴스를 생성하고 난 후 data 속성에 객체를 추가하면 그 객체에는 반응성이 생기지 않는다. (객체의 변화가 있든 없든 뷰에서 화면을 다시 갱신하지 않는다는 의미)
[Reference]
Do it Vue.js 입문(이지스퍼블리싱)