Cộng đồng Hỏi & Đáp của Inflearn

혼자서 복습하던 중 AddBoar.vue는 화면에 보드를 추가하는 것이고 Home.vue에서는 추가한 보드를 포함한 모든 보드를 갱신하는 역할이라고 생각하여 코드를 짰습니다. 아래와 같은 코드로요.

// Home.vue

fetchData() {
  this.loading = true;
  this.FETCH_BOARDS().finally(data3 => {
    console.log("data3 =", data3);
    this.loading = false;
  });
},

// Board.vue

addBoard() {
  this.SET_IS_ADD_BOARD(false);
   this.ADD_BOARD({ title: this.input })
}

여기서 문제점이 보드를 추가하자마자 추가한 보드는 화면에 갱신이 안됩니다. 그리고 새로 고침이나 다른 컴포넌트를 갔다가 들어오면 추가한 보드가 화면에 갱신이 됩니다.

그래서 기존의 소스 코드를 참고하여 틀린 부분을 고친 후, 보드를 추가했을 때 Vuex의 actions에 FETCH_BOARD하는 부분에 대한 로그를 찍어봤습니다.

// Home.vue
fetchData() {
  this.loading = true;
  this.FETCH_BOARDS().finally(data3 => {
    console.log("data3 =", data3);
    this.loading = false;
  });
},

// Board.vue
addBoard() {
  this.SET_IS_ADD_BOARD(false);
   this.ADD_BOARD({ title: this.input }).then(data1 => {
    console.log("data1 =", data1);
    this.FETCH_BOARDS().then(data2 => {
      console.log("data2 =", data2);
    });
  });
}

화면 상에서 Create new board...라는 보드를 클릭하였을 때, 추가한 보드가 바로 화면에 갱신이 되고

console.log를 찍어보면 

data3, data1, data2 순으로 출력이 됩니다. 왜 이러는 지 이유를 혹시 알 수 있을까요? 

자식 컴포넌트에서 무언가가 바뀌면(?) 이와 관련된 상위 컴포넌트부터 해당 자식 컴포넌트까지 가상 돔 트리가 생성이 되고, 상위 컴포넌트부터 자식 컴포넌트까지 순차적으로 바뀌니까 이런 현상이 발생한 건가요?