Vue_11 <script></script>

---

import

• 역할: 외부 모듈이나 라이브러리를 가져오는 거임. Vue.js에서 다른 컴포넌트를 쓰거나 라이브러리, 유틸리티 함수 등을 가져올 때 씀.

import ChildComponent from './ChildComponent.vue';
import axios from 'axios';

 

---

export default {}

• 역할: Vue.js에서 컴포넌트를 정의하는 객체를 내보내는 거임. 여기서 export default는 이 컴포넌트를 다른 곳에서 쓸 수 있도록 내보내는 거임.

export default {
  // 컴포넌트의 모든 정의가 여기에 들어감
}

---

name

• 역할: 컴포넌트 이름 정의함. 다른 컴포넌트에서 참조할 때 쓰이고, Vue DevTools에서 디버깅할 때도 유용함.

export default {
  name: 'MyComponent'
}

---

components

• 역할: 자식 컴포넌트를 현재 컴포넌트에 등록하는 거임. import한 자식 컴포넌트를 여기서 등록하면, 템플릿에서 해당 컴포넌트를 사용할 수 있음.

import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}

---

 

props

• 역할: 부모 컴포넌트로부터 전달받는 데이터를 정의함. 부모 컴포넌트가 자식에게 데이터를 전달할 때 props를 씀.
•  

export default {
  props: {
    myProp: String,
    anotherProp: Number
  }
}

 

---

data()

• 역할: 컴포넌트에서 사용하는 반응형 데이터를 정의하는 거임. data 함수는 객체를 반환하고, 그 객체 안에 정의된 값들은 템플릿에서 참조할 수 있음.

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  }
}

 

 

반응형 데이터란 데이터가 변경될 때 Vue가 자동으로 그 변화를 감지하고 관련된 DOM이나 템플릿을 자동으로 업데이트 하는 데이터임

<template>
  <div>
    <p>{{ message }}</p> <!-- message 값이 변경되면 자동으로 템플릿이 업데이트 됨 -->
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'  // 반응형 데이터
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Message Updated!';  // 데이터가 변경되면 화면도 변경됨
    }
  }
}
</script>

 

결국 어렵게 생각할 필요 없이 import, name, props 처럼 data()도 해당 컴포넌트에서 사용할 데이터를 정의

---

computed

• 역할: 계산된 속성을 정의함. computed는 종속된 데이터가 변하면 자동으로 다시 계산되며, 캐싱을 통해 성능을 최적화함.

export default {
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}

 

※ 로그인 상태와 같은 데이터를 computed에서 관리하면, 로그인 여부에 따라 화면의 데이터나 UI 요소를 동적으로 제어할 수 있음

예) 로그인 상태에 따라 특정 버튼을 보이거나 숨기고, 로그인된 사용자만 사용할 수 있는 기능을 제공하는 등의 처리를 할 수 있음

 

이럴 경우 반응형으로 자동 처리 되기 때문에 로그인 상태가 변경되면 자동으로 계산되고 그에 따라 ui가 즉시 업데이트 됨.

로그인 여부에 따라 ui 요소를 보이거나 숨기는 등 처리를 쉽게 할 수 있고(조건부 렌더링)
로그인된 상태에만 특정 기능을 활성화하는 것도 쉽게 구현할 수 있음

 

 

---

watch

• 역할: 특정 데이터가 변경될 때 추가적인 로직을 실행하고 싶을 때 쓰는 거임. watch는 지정한 데이터 변화를 감지하고, 그에 맞춰 특정 동작을 수행함

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
}

---

mounted

• 역할: 컴포넌트가 DOM에 마운트된 직후 실행되는 라이프사이클 훅임. 주로 DOM 요소에 접근하거나, API 요청 등을 수행할 때 쓰임.

export default {
  mounted() {
    console.log('컴포넌트가 마운트되었음');
  }
}

---

updated

• 역할: 컴포넌트의 데이터가 변경되어 DOM이 다시 렌더링된 직후 실행됨. 데이터 업데이트 후 추가 작업을 할 때 씀.

export default {
  updated() {
    console.log('컴포넌트가 업데이트되었음');
  }
}

---

methods

• 역할: 컴포넌트에서 쓰는 메서드(함수)를 정의하는 거임. 메서드는 로직 처리나 이벤트 핸들러로 쓰임.

export default {
  methods: {
    greet() {
      console.log('Hello!');
    }
  }
}

 

※ $emit

이벤트를 발생시키는 메서드. 

주로 자식 컴포넌트가 부모 컴포넌트로 데이터 전달하거나, 어떤 작업이 완료되었음을 알릴 때 사용됨.

<!-- 자식 컴포넌트 (ChildComponent.vue) -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Child!'); // 'messageSent'라는 이벤트 발생
    }
  }
}
</script>

 

OR 부모는 자식 컴포넌트에서 발생한 이벤트를 청취(listen)하여 그에 따른 추가 로직을 처리할 수 있음

<!-- 부모 컴포넌트 (ParentComponent.vue) -->
<template>
  <div>
    <child-component @messageSent="handleMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log('Received from child:', message); // 'Hello from Child!'가 출력됨
    }
  }
}
</script>

1. 자식 컴포넌트에서 this.$emit('messageSent', 'Hello from Child!')가 실행됩. 이는 'messageSent' 이벤트를 발생시키고, 'Hello from Child!'라는 데이터를 함께 전달.
2. 부모 컴포넌트에서 <child-component @messageSent="handleMessage" />로 'messageSent' 이벤트를 청취.
3. 자식 컴포넌트가 messageSent 이벤트를 발생시키면, 부모 컴포넌트는 이를 감지, handleMessage 메서드를 실행하여 그 데이터를 처리.

 

---

 

 

 

import ChildComponent from './ChildComponent.vue';  // 모듈 또는 컴포넌트 가져오는 부분임

export default {
  name: 'MyComponent',  // 컴포넌트 이름 정의함
  components: {         // 자식 컴포넌트 등록하는 부분임
    ChildComponent
  },
  props: {              // 부모로부터 전달받을 데이터 정의함
    myProp: String
  },
  data() {              // 컴포넌트에서 사용할 반응형 데이터 정의함
    return {
      message: 'Hello Vue!'
    };
  },
  computed: {           // 계산된 속성 정의함
    reversedMessage() {
      return this.message.split('').reverse().join(''); // 메시지 반대로 돌리는 속성임
    }
  },
  watch: {              // 데이터 변화를 감지해서 추가 로직 실행함
    message(newValue) {
      console.log('Message changed:', newValue); // 메시지 변화 감지해서 콘솔에 찍음
    }
  },
  mounted() {           // 컴포넌트가 DOM에 마운트된 후 실행됨
    console.log('컴포넌트가 마운트되었음');
  },
  updated() {           // 컴포넌트가 업데이트된 후 실행됨
    console.log('컴포넌트가 업데이트되었음');
  },
  methods: {            // 메서드 정의함
    greet() {
      console.log('Hello from method!'); // 인사하는 메서드임
    }
  }
};

 

 

 

• **data()**는 컴포넌트에서 사용할 기본 데이터를 정의하는 곳. 변경 시 자동으로 화면에 반영되며, 캐싱은 없음
• **computed**는 기존 데이터에 의존하여 계산된 값을 자동으로 제공하며, 캐싱이 이루어져 데이터 변경이 없을 때는 성능을 최적화
• **methods**는 함수로, 특정 동작이나 로직을 처리할 때 사용됨. 호출될 때마다 실행되며, 캐싱은 없음