10/14 - Vue

Vue 인프런 강의 복습

- ref : https://www.inflearn.com/course/vuejs/

* NotFound 컴포넌트

잘못된 경로로 이동했을 경우를 처리하기 위해서, 라우트 테이블의 제일 마지막에 선언한다.

const route = [{
	path : "*",
  	component : ..
}]

---

* Vue data 선언 방식

• 코드 예시

//1.
data() {
  return {
    
  }
}

//2.
data : {
  
}

• 1.번의 경우, data가 변경되어도, 동일한 여러개의 컴포넌트가 각각 개별적으로 동작한다.
• 2.번의 경우, 하나의 컴포넌트의 데이터가 변경되면 다른 컴포넌트의 데이터도 같이 변한다.

• 참고 : https://kr.vuejs.org/v2/guide/components.html#data-%EB%8A%94-%EB%B0%98%EB%93%9C%EC%8B%9C-%ED%95%A8%EC%88%98%EC%97%AC%EC%95%BC%ED%95%A9%EB%8B%88%EB%8B%A4

---

* Vue 컴포넌트

0. Idea

1. 각 페이지에 해당하는 API 호출 함수 생성 => 라이프 사이클 훅에서 API 호출 => template에 데이터 바인딩 => 렌더링
2. 페이지를 각각 컴포넌트화하자 = 작은 조각으로 나눈다.

1. 컴포넌트란
: 재사용 가능한 코드 조각, 사용자 지정 엘리먼트를 의미
: 재사용성을 올려준다.

2. 컴포넌트(사용자 지정 엘리먼트) 사용하기

• 전역 등록

• 지역 등록

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
  }
})

//DOM
<'component-a'></'component-a'>

1. 생성한 사용자 지정 엘리먼트를 components 프로퍼티 안에 등록한다.
2. <component-a> 형태로 DOM에서 컴포넌트를 사용할 수 있다.

3. 컴포넌트에 데이터 전달하기

• 상위 컴포넌트 -> 하위 컴포넌트로 데이터전달

//List.vue
<card-item
	v-for="card in data.cards"
	:data="card"
	:key="card.pos"
/>

//props 작성 방식
<card :card-title="card.title"></card>

• "data" 이란 이름으로 "card"라는 데이터를 전달.
• 하위 컴포넌트에 데이터 전달시, 케밥 케이스로 작성해야한다. 하위 컴포넌트에서 사용시에는 카멜 케이스로도 가능하다.

• 하위 컴포넌트에서 데이터를 받는 방법 = Props

//Card.vue
props: ["data"],

• 상위 컴포넌트로부터 전달받은 data를 props 프로퍼티에 등록하여 사용한다.
• props에 등록한 data는 vue 인스턴스 내에서 this.data로 접근이 가능하다.

---

Vue에서 element에 데이터 추가하기

<component v-bind:data-id="" ></component>

• dataset을 추가할때, 뷰 인스턴스 내의 데이터를 추가할 경우, v-bind를 사용해야한다. 또한, 케밥 케이스로 작성하고, 전달받은 컴포넌트에서 사용할 때는 카멜 케이스로 사용할 수 있다.

---

* Errors

//Nav.vue
onLogout() {
  		this.LOGOUT();
  		//1.
  		this.$router.push("login");
  		//2.
  		this.$router.push("/login");
        },

• 라우팅 : /b/1 에서 로그아웃 시 1번의 경우에 /b/1/login으로 이동했다.
• 2번의 경우에 원하는 결과인 /login 경로로 이동했다.

결론 : $router에 경로를 푸시할때, '/'를 적어줘야지 루트 경로 기준으로 이동한다..?

---

Reference

1. 뷰 컴포넌트 : https://kr.vuejs.org/v2/guide/components-registration.html
2. 뷰 컴포넌트 데이터 선언 방식 : https://kr.vuejs.org/v2/guide/components.html#data-%EB%8A%94-%EB%B0%98%EB%93%9C%EC%8B%9C-%ED%95%A8%EC%88%98%EC%97%AC%EC%95%BC%ED%95%A9%EB%8B%88%EB%8B%A4
3. 뷰 컴포넌트 Props : https://kr.vuejs.org/v2/guide/components-props.html