<script setup>, <style scope>

1. <script setup>

<script setup>는 Vue 3에서 도입된 Composition API를 사용하기 위한 간결한 문법입니다.

이 문법은 `setup` 함수 내에서 직접적으로 변수나 함수를 정의할 수 있게 해줍니다.

  <script setup>
    import { ref } from 'vue'

    const count = ref(0)

    function increment() {
      count.value++
    }
  </script>

  위 예제에서는 `count`라는 반응성 있는 참조와 `increment`라는 함수를 직접 정의했습니다.

- Props와 Emits: 
  `defineProps`와 `defineEmits`를 사용하지 않고도 props와 emits를 타입 어노테이션으로 정의할 수 있습니다.

  <script setup>
    const props = defineProps(['msg'])
    const emit = defineEmits(['update'])
  </script>

  위와 같은 코드는 아래와 같이 간결하게 작성할 수 있습니다.

  <script setup>
    import { ref } from 'vue'
  
    const count = ref(0)
    const { msg } = defineProps()
    const emit = defineEmits()
  </script>

-<script setup>` 문법을 사용할 때는 일부 Vue 3 Composition API 기능들이 자동으로 내장되어 있습니다.

이렇게 되면 일부 API 함수들을 명시적으로 임포트하지 않아도 됩니다.

`<script setup>` 내에서, `defineProps`, `defineEmits`, `withDefaults`, 그리고 `useContext` 같은 함수들은 내장되어 있으므로 별도로 `import` 할 필요가 없습니다. 그러나 다른 Composition API 기능들, 예를 들면 `ref`, `reactive`, `watch`, `computed` 등은 여전히 `import` 해야 합니다.

 

setup함수는 객체를 반환한다.

 

 

2. <style scoped>

Vue 컴포넌트에서 스타일을 정의할 때, 이 스타일이 해당 컴포넌트에만 적용되길 원하면 `<style scoped>`를 사용합니다.

- 동작 원리: 
  `scoped`가 추가되면, Vue는 해당 컴포넌트의 DOM에 유니크한 data 속성 (예: `data-v-123456`)을 추가하고, 정의된 CSS도 동일한 속성 선택자로 확장하여 해당 스타일이 해당 컴포넌트의 엘리먼트에만 적용되도록 합니다.

  <template>
    <div class="my-component">
      <p>이 텍스트는 특별한 스타일을 가질 것입니다.</p>
    </div>
  </template>

  <style scoped>
    .my-component p {
      color: blue;
    }
  </style>

  위 예제에서, `color: blue` 스타일은 이 컴포넌트의 `<p>` 태그에만 적용됩니다. 

다른 컴포넌트에서 동일한 `.my-component p` 선택자를 사용하더라도, 이 스타일은 적용되지 않습니다.

이 두 기능을 함께 사용하면, 각 Vue 컴포넌트는 로직과 스타일 모두에서 독립적이며 재사용 가능한 단위가 됩니다.