Created VS Mounted

많은 경우 중 하나의 예로 들었지만, created와 mounted는 확실히 인지해야한다.

사용에 있어, 하나의 예로 created는 데이터 초기화에 대한 목적, mounted는 DOM 조작에 대한 목적으로 사용할 수 있다.

created: data에 직접 접근이 가능하기 때문에, 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅해야 하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절합니다.

mounted:일반적으로 가장 많이 사용하는 mounted훅입니다. 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능합니다.

출처: https://mygumi.tistory.com/201 [마이구미의 HelloWorld]

props 속성

프롭스 속성은 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법입니다. 프롭스 속성을 기억할 때는 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성으로 기억하면 쉽습니다.

사용해야될때 : 컴포넌트가 같은 내용이 아닐경우, 큰 틀은 중복되지만, 다른 부분이 있을경우

props속성을 이용하여 각각 다른 내용을 전달 해줄수 있다.

쉽게 부모에서 자식으로 데이터를 전달한다.

여기서 저는 props로 받는 board와 categories데이터를 초깃값으로 받은 후, 사용자 입력에 따라 로컬 데이터로써 활용하기 위해 props의 데이터와 data의 데이터를 분리하고자 합니다.

Data() 속성

함수 내에서 data를 매번 새로운 객체로 반환.컴포넌트는 data가 각각 컴포넌트마다 달라야하기 때문에 return을 이용하여 컴포넌트의 data를 관리한다.return값을 통해 객체 리터럴을 반환한다.

<template>
  <div>
    [{{ $props.pdata }}] 쿠키런 공지 info
    <div>{{ noticeInfo.title }}</div>
    <div>{{ noticeInfo.regdate }}</div>
    <div>{{ noticeInfo.contents }}</div>
  </div>
</template>

<script>
import { getNoticeContents } from '../../api/api.js';
//props: ['프롭스 속성 명'] : 하위 컴포넌트
// 여기서 idx 데이터를 서버로부터 받아옵니다.
// 컴포넌트에서의 Data (return 객체 리터럴)
//JS에서 Props를 가져올때는 보통 camel-case로 가져온다.
export default {
  props: ['pData'],         
  mounted() {
    console.log(this.$props.send);
  },
  data() {
    return {
      idx: this.$props.send,
      noticeInfo: {}
    }
  },
  created() {
    getNoticeContents(this.idx)
      .then(response =>
        this.noticeInfo = response.data);
  }
}
</script>

<style>

</style>