📚TIL

day33

Computed

• 데이터를 조작할 때 표현식이나 methods를 사용할 경우 중복실행될 때 이미 결과값을 알고 있음에도 불구하고 여러번 계산해야하기 때문에 효율성이 떨어짐
• computed: 캐싱기능이 있어 첫번째 출력시 계산된 데이터를 캐싱했다 이후 출력시 캐싱된 데이터를 가져와 출력하기 때문에 같은 것을 반복적으로 출력할 때 유용
• 장점 : 의존하는 데이터에만 집중할 수 있으며 그 외의 데이터가 변경될 경우 다시 연산되는 부작용이 없기 때문에 관리가 용이
• computed를 통해 값을 할당할 수 없음
• computed 안에서 특정한 데이터를 get, set으로 구분해서 값을 할당하거나 가져오는 것이 가능

const App = {
	data() {
    	return {
        	firstName : 'Joaquin',
          	lastName : 'Phoenix'
        }
    },
  	computed: {
    	fullName:{
        	get() {
          	return `${this.firstName} ${this.lastName}`
            }
          	set(newValue) {	//'Joaquin Phoenix'
    			const names = newValue.split(' ')	
  			//['Joaquin', 'Phoenix']
    			this.firstName = names[0]
                this.lastName = names[names.length - 1]
			//middleName이 있는 경우에도 
			//lastName을 가져옴
    		}
        }
    }
}

const vueModel = Vue.createApp(App).mount('#app')

watch

• watch : 감시하는 데이터가 변경됐을 때 실행할 로직을 추가
• 이미 선언되어진 반응형 데이터만 사용 가능
• 감시 함수의 인수로 새로운 값과 이전 값을 받을 수 있음
• watch콜백은 배열, 객체같은 참조형 데이터는 직접 교체될 때만 발생하기 때문에 참조형데이터에 대한 활용도가 떨어짐
• deep : deep 옵션을 추가하여 참조형 데이터를 더 깊게 감시할 수 있도록 함
• handler : 데이터 값이 변경됐을 경우 호출될 함수를 지정
• immediate : 옵션 추가시 데이터가 변경되는 것을 감지하는 것과 별개로 데이터가 준비된 직후 바로 실행할 수 있도록 함

const App = {
	data() {
		return {
        	users: [
              {id : 1, name : 'A'}
              {id : 2, name : 'A'}
              {id : 3, name : 'A'}
            ]
        }    
    },
    watch: {
    	users:{
        	handler() {
            	console.log(this.user)
            },
            deep: true,	
              //deep이 true인 경우 변경사항에 대해
              //watch 콜백 실행
           	immediate: true
        }
    }
}

day34

class

• vue.js에서 class라는 속성에 하나의 데이터 뿐 아니라 여러개의 데이터를 연결할 수 있도록 패턴을 제공
• 객체 리터럴로 작성하여 쉼표로 구분하는 key:value형태의 값을 작성하면 class를 추가할 수 있음
• class이름과 data이름이 같은 경우 생략하여 사용 가능
• BEM방식으로 하이픈과 같은 기호들이 class 이름으로 들어가는 경우엔 ''로 묶어서 작성해야함
• ''내부에서 하나의 속성에 띄어쓰기를 통해서 여러개의 class 이름을 넣을 수 있음
• class 내부에는 객체 데이터, 배열 데이터도 연결이 가능하며 배열로 넣은 문자데이터가하나의 class 값으로 정의됨

<!-- className : dataName -->
<div :class="{ active: active, small : small }"></div>
<div :class="{ active, small }"></div>
<div :class="{ 'title--active' : active}"></div>

class와 객체 데이터의 연결

• class 속성에 하나의 객체 데이터를 직접 연결할 수 있음
• 객체데이터 내부에서 반응형 데이터를 활용해야 할 경우 그 객체 데이터를 computed를 통해 계산된 데이터로 만들어서 this키워드로 각각의 반응형 데이터를 사용
• this를 통해 접근한 반응형 데이터들이 수정될 때마다 객체의 계산된 데이터도 갱신되어 적용될 수 있는 구조가 됨

<button @click="toggle">Click me!</button>
<div :class="classObj"> {{ msg }} </div>

const App = {
	data(){
    	return {
        	msg: 'Hello Vue',
          	active: false,
          	small: true
        }
    },
  	computed:{
    	classObj() {
        	return {
            	active: this.active,
              	'title--small color--tomato': this.small
              	//className : data
            }
        }
    },
  	methods: {
    	toggle() {
        	this.active = !this.active
        }
    }
}

const vueModel = Vue.createApp(App).mount('#app')

style

• 스타일 인라인 방식 : html에 스타일 속성을 사용해서 css를 추가하는 방식
• 스타일 인라인 방식은 CSS명시도가 1000점이기 때문에 사용을 권장하지 않지만 데이터를 바인딩해서 스타일을 제어하는 경우에는 권장됨
• 하나의 요소에 지정한 이벤틀에 여러개의 매소드를 연결하는 경우 이름 뒤에 소괄호를 추가하여 실행시켜야 함

<div @click = "toTomato(); increaseWidth();">
  Hello Vue!
</div>

+vue.js에서 css 속성의 key값을 ''로 묶어서 데시를 사용하는 방식 외에도 카멜케이스도 지원하기 때문에 vue.js에서 자동으로 이를 변경해 줌

<div :style = "{ color, backgroundColor }"></div>

• 여러개의 객체 데이터를 연결하는 방법 : 배열 리터럴 사용하여 여러개의 스타일 객체들을 한번에 적용이 가능하며 중복된 속성이 있는 경우 나중에 적용한 값이 덮어씀

<div :style="[titleStyleObj, styleObj]"></div>

조건부 렌더링

• boolean data는 true, false 말고도 truthy, falsy 데이터를 통해 출력 여부를 판단할 수 있음
• v-if를 통해 요소를 출력할지 하지 않을지를 지정할 수 있음
• v-if와 v-else를 형제요소로 연결하여 사용 가능하며 두가지 사이엔 v-else-if를 제외하고 다른 요소들이 있지 않도록 주의해야함
• 조건에 걸려서 출력되는 요소가 여러개인 경우 새로운 요소로 래핑
• 래핑한 요소가 출력되지 않기를 원하는 경우 template태그를 사용하여 감싸면 template요소는 렌더링 되지 않음
• v-show : 요소가 보여질지 보여지지 않을지 boolean값으로 나타냄
• v-show는 구조적으로 우선 생성하기 때문에 false인 경우에도 잠시동안 데이터가 출력되어 보여질 위험이 있음
• v-cloak을 추가하여 컴포넌트가 준비될 때까지 컴파일 되지 않은 이중괄호 구문을 숨기는데 사용할 수 있음
• v-cloak이 추가된 요소가 사용되는 vue 프로젝트에서 이중괄호구문이 출력돼야하는 데이터의 준비가 끝나게 되면 vue.js 내부 동작을 통해 해당하는 디렉티브 제거

[v-cloak]{
    display: none;	
}
// css를 통해 화면에 {{ msg }} 라고 출력되는 것을 방지

<button @click="toggle">Click Me!</button>
<div v-show="isShow" v-cloak>{{ msg }}</div>

const App ={
	data() {
    	return {
        	msg: 'Hello Vue!',
          	isShow : false
        }
    },
  	methods:{
    	toggle() {
        	this.isShow = !this.isShow
        }
    }
}

const vueModel = Vue.createApp(App).mount('#app')

• v-if와 v-show의 차이
  • v-if : v-if는 true일 경우 요소를 구조화하여 출력하며 false인 경우엔 구조적으로 생성을 하지 않고 v-if라는 주석이 추가됨
  • v-show : true, false와 상관 없이 구조적으로 우선 출력한 이후 display: none 속성을 적용, 제거하는 방식으로 화면에 출력하는 여부만 변경
  • v-if는 초기 렌더링이 낮지만 전환비용이 높고 v-show는 전환비용은 적지만 초기렌더링 비용이 높음
• v-if, v-for을 동시에 사용하는 경우 v-if가 우선순위를 가지며 둘을 동시에 사용하지 않는 것을 권장
• 사용해야할 경우에 권장되는 코드

<ul>
  <!--template를 활용하여 두가지를 
			동시에 사용하지 않도록 조정-->
  <template v-for="user in users">
    <li v-if="user.isActive">{{ user.name }}</li>
  </template>
</ul>

🌊하루를 마치며

오늘도 vue강의를 들었다. 강의 내용이 많아서 집중해서 들어야하기 때문에 시간이 오래걸렸다. 그래서 목표한 부분까지 공부하지 못해서 아쉽다. vue를 배우면서 바닐라js와 비교하게 됐는데 원하는 기능을 보다 쉽게 구현할 수 있다는 점이다. 그리고 html과 바로 연결해서 사용하는 것이 새롭고 재밌다! 바닐라js로 구현한 프로젝트들을 vue를 배워서 다시 구현해보고 싶다.
내일은 vue강의와 완성못한 css프로젝트를 수정할 계획이다!