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 입문(이지스퍼블리싱)
