10/22
Vue 인프런 강의 복습
Ref : https://www.inflearn.com/course/vuejs/
1. 보드 색상 변경
-
branch : board/color
-
commit : fbf7439
-
Idea
- 색상 컴포넌트의 색상 클릭 시 api를 통해 보드의 배경색 데이터를 변경한다.
- body의 background-color 속성을 보드의 색상으로 변경한다.
- nav의 변경해서 dim처리 한다.
- 다시 홈 컴포넌트로 이동 시 body, nav의 색상을 기본 값으로 변경한다.
- 스토어를 통해서 로직 관리..?
-
자세한 로직
- 보드 수정 api 호출 => 데이터 수정
- 보드 fetch 함수 호출 => 수정된 데이터를 받아오고, 데이터의 bgColor를 통해서 스토어의 배경색 데이터 변경(보드 컴포넌트로 진입할때 배경색이 변경되어야 하므로)
- 보드 컴포넌트 진입 시 스토어의 배경색 데이터를 통해서 Body, nav 색상 변경
- 스토어의 배경색이 변경되면, DOM 엘리먼트 조작을 통해서 body, nav색상 변경
- 다시 홈 컴포넌트로 이동시, 같은 함수를 호출해서 body, nav색상을 기본 값으로 변경
-
Vue Style 바인딩
- 객체 형식으로 바인딩 할 수 있다.(케밥케이스, 카멜케이스 모두 사용가능)
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
- 잘못 알고 있던 개념 : Updated, mounted 훅
- mounted : 컴포넌트가 돔에 생성(마운트)된 이후 => 컴포넌트($el), 템플릿, 렌더링 된 접근 가능!
- updated : 컴포넌트에서 사용하는 반응형 속성들이 변경되거나 어떤 이유로 재렌더링이 발생되면 실행한다. => 데이터의 변경이 있을 경우!
=> Colors컴포넌트에서는 데이터의 변경이 일어나지 않아서 updated훅이 실행되지 않았다.
- 에러
:data-bg-color="color"
Vue에 데이터셋 바인딩할때 ' : ' 를 빼먹어서 오류가 발생했다.
-
흐름 다시 정리하기
- api 호출(사용) 함수 생성 => 카드/보드/리스트 별로 로직(객체)를 분리한다. => 사용하기 편리하게!
- actions에 작성한 함수를 등록한다.
- 컴포넌트에서 actions에 등록된 함수를 사용한다.
- 스토어를 사용하지 않았다면, Colors에 보드를 수정하고, 이벤트를 발생시켜 Board컴포넌트까지 전달한 후 , Board컴포넌트에서 다시 데이터를 불러와야 하지만, 스토어에서 보드 데이터를 관리하므로, 스토어에 등록된 Board데이터 호출 함수를 실행만 하면된다!!!
-
코드
//Board.vue
setColor(color) {
//2.
document.body.style.backgroundColor = color ? color : "#fff";
//3.
document.querySelector("#nav-bar").style.backgroundColor = color
? "rgba(0, 0, 0, 0.15)"
: "#026aa7";
},
updated() {
//1.
this.setColor(this.bgColor);
},
destroyed() {
//4.
this.$store.commit("SET_BG_COLOR", null);
//5.
this.setColor(null);
},
- 보드 컴포넌트의 "created"훅에서 데이터가 업데이트된 후 setColor메소드에 스토어의 "bgColor"데이터를 전달한다.
- body의 색상을 변경한다, destroyed훅을 위해서 null값을 인자로 넘길경우, 기본 배경색(흰색)이 되도록 작성
- 마찬가지로 nav의 색상도 변경한다
- 보드 컴포넌트의 "destroyed"훅에서 배경색을 기존 색상으로 변경하고, 스토어의 bgColor데이터를 널 값으로 초기화한다.
=> 좀더 효율적인 방법찾아보기!!!, setColor함수가 현재 Board 컴포넌트의 데이터가 변경될때마다 계속 실행된다..
2. Vue Watch
-
스토어의 데이터를 변경했는데 updated훅이 호출안되는 경우 발생
=> 데이터의 변화를 감지하기 위해 감시자(Watch)를 사용하기로 했다. -
기본 사용법
watch : {
//1.
a : function(newVal, oldVal) {
...
},
//2.
b : {
handler : "method",
immediate : true,
}
}
- 감시할 속성 "a" 와 핸들러를 등록 핸들러에는 새로 들어온 값 = newVal, 기존의값 = oldVal이 전달된다.
- immediate : true 옵션을 주면 created 훅에서 호출한 것처럼 컴포넌트 생성시 바로 콜백함수를 실행한다.
- watch에서 methods의 함수 사용하기
bodyColor: {
handler: function() {
console.log(this); //1.
//3.
this.someFunction()
}
},
bodyColor : {
handler: () => {
console.log(this); //2.
},
}
},
- this === Vue 인스턴스
- this === undefined
- watch 내에서 methods에 등록된 함수를 사용하려면 function(){}안에서 실행해야 한다!
- handler : "some Function" 이렇게 함수를 직접 전달하려면 Vue 오브젝트 밖에 함수를 선언해야한다.
* Reference
1. Vue style 바인딩 :
https://kr.vuejs.org/v2/guide/class-and-style.html#%EA%B0%9D%EC%B2%B4-%EA%B5%AC%EB%AC%B8-1
2. Vue watch :
https://kr.vuejs.org/v2/api/#watch
3. watch에서 methods 사용하기 :
https://stackoverflow.com/questions/35755027/how-to-call-function-from-watch
Author And Source
이 문제에 관하여(10/22), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyh196201/1022저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)