Vue.js 기초 (Vue.js Basics)

Vue.js 기초 (Vue.js Basics)

Vue.js는 간단하면서도 강력한 프론트엔드 프레임워크다. 데이터 바인딩과 컴포넌트 구조로 UI를 쉽게 만들어준다. 이번에는 Vue.js의 기본부터 심화까지 코드와 함께 자세히 풀어보려고 한다.


Vue.js를 잘 이해하면 반응형 인터페이스를 빠르게 구현할 수 있다. 하나씩 단계별로 알아보자.


Vue.js 시작하기

Vue.js를 사용하려면 먼저 CDN으로 추가하거나 프로젝트를 설정한다. 간단히 CDN으로 시작해보자:

<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
head>
<body>
    <div id="app">
        {{ message }}
    div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return { message: "안녕, Vue.js!" };
            }
        }).mount("#app");
    script>
body>
html>
// "안녕, Vue.js!"

{{ }}로 데이터를 화면에 바로 표시했다.


1. 데이터 바인딩

Vue.js의 핵심은 양방향 데이터 바인딩이다:

<div id="app">
    <input v-model="text">
    <p>입력값: {{ text }}p>
div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return { text: "" };
        }
    }).mount("#app");
script>

v-model로 입력값과 데이터를 실시간으로 연결했다.


2. 디렉티브 사용

Vue.js는 디렉티브로 동적인 UI를 만든다:

<div id="app">
    <button v-on:click="toggle">토글button>
    <p v-if="isVisible">보이는 상태p>
div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return { isVisible: false };
        },
        methods: {
            toggle() {
                this.isVisible = !this.isVisible;
            }
        }
    }).mount("#app");
script>

v-if로 조건을, v-on으로 이벤트를 처리했다.


3. 리스트 렌더링

v-for로 배열을 렌더링할 수 있다:

<div id="app">
    <ul>
        <li v-for="item in items" :key="item">{{ item }}li>
    ul>
div>

<script>
    const { createApp } = Vue;
    createApp({
        data() {
            return { items: ["사과", "바나나", "오렌지"] };
        }
    }).mount("#app");
script>
// 
  • 사과
  • 바나나
  • 오렌지

:key로 각 항목을 고유하게 식별했다.


4. 컴포넌트 만들기

Vue.js에서도 컴포넌트로 UI를 분리할 수 있다:

<div id="app">
    <item-card v-for="item in items" :key="item" :name="item">item-card>
div>

<script>
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return { items: ["사과", "바나나"] };
        }
    });

    app.component("item-card", {
        props: ["name"],
        template: `
항목: {{ name }}
`
    });

    app.mount("#app");
script>

props로 데이터를 전달해 컴포넌트를 재사용했다.


5. 반응형 상태

Vue 3에서는 ref와 reactive로 반응형 데이터를 만든다:

<div id="app">
    <p>카운트: {{ count }}p>
    <button v-on:click="increment">증가button>
div>

<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            const count = ref(0);
            const increment = () => { count.value++; };
            return { count, increment };
        }
    }).mount("#app");
script>

ref로 반응형 변수를 정의하고 버튼으로 값을 변경했다.


6. 데이터 가져오기

API 데이터를 가져와 렌더링해보자:

<div id="app">
    <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}li>
    ul>
div>

<script>
    const { createApp, ref, onMounted } = Vue;
    createApp({
        setup() {
            const posts = ref([]);
            onMounted(async () => {
                const res = await fetch("https://jsonplaceholder.typicode.com/posts");
                posts.value = (await res.json()).slice(0, 5);
            });
            return { posts };
        }
    }).mount("#app");
script>

onMounted로 마운트 시 데이터를 가져왔다.


7. 성능과 구조에 미치는 영향

Vue.js가 앱에 어떤 영향을 주는지 보자:

- 성능: 반응형 시스템으로 필요한 부분만 업데이트된다.

- 구조: 직관적인 디렉티브와 컴포넌트로 코드가 깔끔해진다.

데이터 바인딩과 디렉티브가 Vue.js의 강점이다.


마무리

Vue.js는 데이터 바인딩, 디렉티브, 컴포넌트를 통해 UI 개발을 단순화한다. 기본부터 데이터 가져오기까지 유연하게 활용할 수 있다.


저작자표시 변경금지

'코딩 공부 > 자바스크립트' 카테고리의 다른 글

77. 자바스크립트 유닛 테스트 기초 (Unit Testing Basics)  (2) 2025.03.26
76. Angular 기초 (Angular Basics)  (0) 2025.03.25
74. Node.js 기초 (Node.js Basics)  (2) 2025.03.25
73. React 기초 (React Basics)  (0) 2025.03.24
72. 자바스크립트 jQuery 기초 (jQuery Basics)  (2) 2025.03.24

+ Recent posts

티스토리툴바