[Vue.js] style 태그에 있는 scoped의 의미

CSS를 정의하는 style태그에 scoped의 의미

• SPA는 말 그대로 Single Page, HTML Page가 단 한개만 존재하기 때문에 Component별로 다른 파일에서 Style을 지정해주어도 각 태그, class 등에 적용되는 style이 겹칠 수 있다.
• 이를 해결하기 위해서 사용되는 방법은 여러가지가 있다.
  • React에선 SCSS의 Nesting을 사용하거나, styled components를 사용해서 className을 독립적으로 지정되도록 하는것이 일반적이다.
  • Vue.js에선 <style scoped>라는 부분이 존재한다. 이 scoped라는 속성이 해당 파일에서 정의되는 부분에서만 scope이 지정되도록 만들어 주는 마법의 키워드이다.
• 예시는 아래와 같다.

<template>
  <header>
    <h1>TODO it!</h1>
  </header>
</template>
<script>
export default {};
</script>
<style scoped></style>