코드읽기
컴포넌트란 애플리케이션 내에서 재사용이 가능한 요소들을 의미한다 vue 프로젝트의 components 디렉토리에 생성한다
vue 파일을 작성할 때
<script setup> 하는 이유
setup() 함수는 vue 컴포넌트가 렌더링되기 전에 실행되는함수로 html이 표시되기 전 필요한 로직을 준비하는 역할을 한다
vue 컴포넌트가 생성될 때 가장 먼저 실행된다.
setup() 함수 내부에 변수와 함수를 정의하고 리턴값을 반환해서 템플릿에서 사용할 변수를 제공하지만
<script setup>을 사용하면 자동으로 변수와 함수를 템플릿에서 사용할 수 있도록 등록해준다.
스크립트 내에 return이 사라지기 때문에 짧고 간결한 코드를 작성할 수 있고, 더 직관적으로 Compositon API의 문법을 사용할 수 있다. (vue3에서 새로 도입된 방식으로 setup()에서 모든 로직을 정의할 수 있다.)
// 셋업을 사용하기 전 셋업함수
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello Vue!');
return { message };
}
};
</script>
<template>
<p>{{ message }}</p>
</template>
---------------------------------------------------------
// setup 속성을 사용한 코드
<script setup>
import { ref } from 'vue';
const message = ref('Hello Vue!');
</script>
<template>
<p>{{ message }}</p>
</template>
<style scoped> /*scoped 속성은 현재 컴포넌트에만 이 스타일을 적용한다는 의미 */
.front-wheel { /* .은 해당 class 속성을 가진 태그에 적용시킨다는 의미 */
border: 1px solid black; /* 요소의 테두리를 1px 두께의 검은색 실선으로 설정 */
border-radius: 50%; /* 요소를 원형으로 만듦 */
display: flex; /* Flexbox를 사용하여 내부 요소를 정렬 */
flex-direction: column; /* 내부 요소들을 세로 방향으로 배치 */
justify-content: center; /* 내부 요소들을 수직 방향(세로) 가운데 정렬 */
align-items: center; /* 내부 요소들을 수평 방향(가로) 가운데 정렬 */
width: 150px; /* 요소의 가로 크기를 150px로 설정 */
height: 150px; /* 요소의 세로 크기를 150px로 설정 */
}
</style>
이렇게 만든 컴포넌트는 다른 컴포넌트에서 사용될 수 있다.
스크립트 블록에 임포트 하고
템플릿 블록에 태그형태로 입력하면 사용할 수 있다.
<script setup>
// 스크립트 블록에 임포트한다
import FrontWheel from "@/components/FrontWheel.vue";
</script>
<template>
<!-- 템플릿 블록에 태그 형태로 사용한다 -->
<FrontWheel>
</FrontWheel>
</template>
이 처럼 사용하는 주체 컴포넌트를 부모 사용되는 객체를 자식 컴포넌트라고 한다 자식 컴포넌트안에 또 다른 컴포넌트를 사용할 수 있다. 자손 컴포넌트라고 한다
여기서 부모는 가장 상위에 위치하고 있는 최상위 컴포넌트라고한다(App.vue)
vue 애플리케이션이 처음 실행되는 html 파일 index.html 업로드 중 src/main.js 파일을 로드하고 실행 중 최상위 컴포넌트인 App.vue를 임포트하고 사용한다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script> <!-- js파일을 로드한다 -->
</body>
</html>
main.js는 vue3 애플리케이션을 사용하기 위한 초기 설정 코드가 작성되어 있다.
defineProps() 함수는 porps를 정의하고 가져오는 역할
부모 컴포넌트에서 전달받을 props를 정의함
템플릿에서 props를 사용할 수 있도록 처리
반환값은 자동으로 반응형 객체가