[Vue.js] 네 번째 정리(props, emit)

0. 부모와 자식 간에는 단방향 바인딩만 가능하다(단방향 데이터 흐름)

-> why? 자식은 부모의 데이터에 접근하거나 데이터를 변경할 수 없어야 한다. (데이터 흐름이 꼬일 수 있기 때문이다) 단지 이벤트만 보낼 수 있다. 자식은 커스텀 이벤트를 방출하면 부모는 이벤트를 리스닝(@)하여 어떠한 행동을 한다(함수 실행 등)

 

1. props & emit

- 분리된 상태의 부모, 자식 컴포넌트 간 긴밀히 소통해야 할 때가 있는데, 이때 필요한 것이 컴포넌트 통신. 즉 props와 emit이다.

- 컴포넌트 통신 규칙은 각 컴포넌트가 독립성은 유지하면서 데이터 흐름이 규칙적이게 하기 위함

- props는 부모에서 자식으로 데이터를 전달하기 위해 사용

- emit은 자식이 부모에게 데이터를 전달하기 위해서 이벤트를 발생시키는 것

- emit은 두 단계로(이벤트 방출 -> 이벤트 청취), props는 세 단계로(1. 데이터 넘겨주기. v-bind로 데이터 바인딩. 두 변수 유기적으로 연결해 값이 변경되면 즉시 반영된다. 작성 예시👉 <MovieListItem :프롭스 속성 이름="상위 컴포넌트 데이터 이름" /MovieListItem> )-> props 선언 -> 데이터 사용) 구현

- props는 아래로, emit은 위로

참조: https://kr.vuejs.org/v2/guide/components.html#Props

컴포넌트 — Vue.js

 

props 정의는 아래 예시처럼 정보를 받을 (자식) 컴포넌트에 선언해준다. cf) emit은 이벤트를 방출하는 컴포넌트에 선언해준다.

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

 

2. vue bootstrap 따로 사용 하지 않고 index.html에 bootstrap cdn 넣어주기 (css, js cdn)

 

3. youtube api 사용하기 실습

-> 구글 클라우드 플랫폼에서 youtube api key 받아오기 -> axios 서버 요청으로 정보 받아오기

 

4. ES6 + destructuring (비구조화) -> object, array를 해체한다.

 

5. 뷰 프로젝트 복제할 때 : cp -r 카피하고 싶은 프로젝트명/ 새로 만드는 카피 프로젝트명

 

6. package.json에 있는 모든 모듈 설치하기 : npm i

-> django에서 pip install -r requirements.txt 와 동일한 역할

 

7. 서버 요청은 postman 사용하기

-> 구글 확장 프로그램 또는 다운받아 사용 가능

-> https://www.postman.com/

Postman | The Collaboration Platform for API Development

8. post / data 방식

- request.post방식은 쿼리딕트, 폼 데이터만 받아올 수 있다.

- request.data방식은 json, 폼 데이터 모두 받아와 쿼리딕트로 보여줄 수 있다.

-> 따라서 data방식이 더 유연하다