Vue.js 마법 학교 2강: 내 마음을 읽는 마법 거울과 명령 버튼 만들기

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 Vue.js 마법사를 우리 웹사이트에 초대하는 법을 배웠습니다. 오늘은 그 마법사가 가진 가장 강력한 두 가지 능력인 데이터 바인딩(Data Binding)과 클릭 이벤트(Click Event)를 배워보려고 합니다. 이 두 가지를 익히면 정적인 웹사이트가 마치 살아있는 생물처럼 사용자의 행동에 반응하게 됩니다. 초등학생 눈높이에서 아주 쉽고 상세하게 설명해 드릴 테니, 함께 마법의 세계로 들어가 볼까요?

Vue.js 마법 학교 2강: 내 마음을 읽는 마법 거울과 명령 버튼 만들기

1. 데이터 바인딩: 데이터를 따라 움직이는 마법 거울

데이터 바인딩이란 무엇일까요? 쉽게 말해 ‘데이터’와 ‘화면’을 끈으로 묶어두는 것과 같습니다. 마치 마법 거울 앞에 서 있는 것과 비슷하죠. 거울 앞에 서 있는 내가 옷을 갈아입으면(데이터가 바뀌면), 거울 속의 내 모습(화면)도 우리가 시키지 않아도 자동으로 바뀝니다.

Vue.js에서는 {{ }}(수염 문법)를 사용하여 데이터 바구니 안에 든 내용을 화면에 보여줍니다. 바구니 안의 내용물이 바뀌기만 하면 Vue.js 마법사가 즉시 화면을 새로 그려준답니다. 우리가 일일이 “화면을 바꿔줘!”라고 명령하지 않아도 되니 정말 편리하죠.

2. 클릭 이벤트: 버튼 하나로 마법 실행하기

웹사이트를 만들다 보면 버튼을 눌렀을 때 어떤 일이 일어나게 하고 싶을 때가 있습니다. 이때 사용하는 것이 클릭 이벤트입니다. Vue.js에서는 @click이라는 명령어를 사용합니다. 이는 “이 버튼을 ‘클릭’하면 내가 정해둔 마법(함수)을 실행해!”라고 컴퓨터에게 속삭여주는 것과 같습니다.

3. 실전 마법: 숫자가 늘어나는 마법 카운터 만들기

이제 데이터 바인딩과 클릭 이벤트를 합쳐서 버튼을 누를 때마다 숫자가 올라가는 ‘마법 카운터’를 만들어 보겠습니다. 코드를 한 줄씩 읽으며 주석을 통해 마법의 원리를 파악해 보세요.

<!-- 1. 마법이 일어날 도화지(HTML) 준비 -->
<div id="app">
  <!-- 데이터 바인딩: number 주머니 속의 숫자를 화면에 보여줘요 -->
  <h1>현재 마법 점수: {{ number }}점</h1>
  
  <!-- 클릭 이벤트: 버튼을 누르면(click) 'increase' 마법을 실행해요 -->
  <button @click="increase">점수 올리기!</button>
  <button @click="reset">처음으로</button>
</div>

<!-- Vue.js 마법 라이브러리 가져오기 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const { createApp } = Vue;

  createApp({
    // [데이터 바구니]: 우리가 기억해야 할 정보를 담아요
    data() {
      return {
        number: 0 // 처음 점수는 0점이에요
      }
    },
    // [마법 주머니(메서드)]: 실제로 실행할 동작들을 정의해요
    methods: {
      // 점수를 1씩 올리는 마법
      increase() {
        this.number = this.number + 1; 
        // this.number는 데이터 바구니 안의 number를 뜻해요!
      },
      // 점수를 다시 0으로 만드는 마법
      reset() {
        this.number = 0;
      }
    }
  }).mount('#app'); // id가 'app'인 곳에 마법을 걸어요
</script>
Vue.js 마법 학교 2강: 내 마음을 읽는 마법 거울과 명령 버튼 만들기

4. 스마트 라이프를 위한 마법 응용

오늘 배운 이 두 가지 기능은 우리가 일상에서 사용하는 거의 모든 스마트 기기에 들어있습니다. 예를 들어 스마트워치에서 걸음 수를 확인할 때 화면이 계속 바뀌는 것은 데이터 바인딩 덕분이고, ‘시작’ 버튼을 눌러 운동 기록을 하는 것은 클릭 이벤트 덕분입니다.

아이들과 함께 위 코드를 실행해 보고, 버튼을 눌렀을 때 숫자가 변하는 것을 관찰해 보세요. increase 마법 안에서 + 1을 + 10으로 바꿔보면 어떤 일이 일어나는지, message라는 새로운 바구니를 만들어 글자를 바꿔보는 실습도 좋습니다. 스스로 만든 코드로 화면이 바뀌는 경험은 아이들에게 무엇과도 바꿀 수 없는 강력한 창의적 자신감을 심어줄 것입니다.

마치며: 소통하는 웹사이트를 향한 첫걸음

Vue.js의 데이터 바인딩과 클릭 이벤트는 사용자와 웹사이트가 서로 대화를 나누게 해주는 소중한 기술입니다. 단순히 정보를 보여주는 데 그치지 않고, 사용자의 손길에 반응하는 똑똑한 도구를 만드는 법을 이제 여러분은 알고 계십니다. 코딩은 어렵고 딱딱한 공부가 아니라, 내 생각을 담아 움직이는 작품을 만드는 과정입니다. 오늘 배운 이 기초 마법들이 여러분과 가족의 스마트 라이프를 더욱 즐겁고 풍요롭게 만들어가는 단단한 기초가 되기를 바랍니다.

Related Posts