Vue.js 마법 학교 4강: 나만의 레고 블록 만들기! (컴포넌트 마법)

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 배운 투명 망토와 복제 마법, 재미있었나요? 오늘은 Vue.js 마법의 꽃이라고 불리는 ‘컴포넌트(Component)’에 대해 배워볼 거예요. 이름은 어렵지만, 사실은 ‘나만의 레고 블록’을 만드는 것과 같답니다!

Vue.js 마법 학교 4강: 나만의 레고 블록 만들기! (컴포넌트 마법)

1. 컴포넌트: 반복되는 마법을 하나로 묶기

우리가 레고로 멋진 마을을 만든다고 상상해 보세요. 똑같이 생긴 가로등이 10개가 필요하다면, 매번 블록을 처음부터 하나하나 쌓아야 할까요? 아니죠! 미리 가로등 세트를 하나 만들어두고, 필요할 때마다 쏙쏙 꺼내 쓰면 훨씬 편하겠죠?

웹사이트에서도 마찬가지예요. ‘프로필 카드’나 ‘댓글창’처럼 자주 쓰는 모양을 컴포넌트라는 이름의 레고 블록으로 미리 만들어두면, 어디서든 이름만 불러서 바로 사용할 수 있어요.

2. 컴포넌트를 쓰면 뭐가 좋을까요?

  • 정리가 쉬워요: 큰 코드를 작은 조각으로 나누어 보관하니 찾기가 아주 쉬워요.
  • 고치기 편해요: 가로등 전구 색을 바꾸고 싶을 때, 10개를 다 고칠 필요 없이 ‘가로등 컴포넌트’ 하나만 고치면 모든 가로등이 한꺼번에 바뀌어요!
  • 나눠서 만들 수 있어요: 엄마는 ‘머리글 블록’, 아이는 ‘내용 블록’을 각자 만들어서 나중에 합칠 수도 있답니다.

3. 실전 마법: 나만의 ‘마법 버튼’ 컴포넌트 만들기

간단한 버튼을 컴포넌트로 만들어서 여러 번 사용하는 마법을 부려볼까요?

<div id="app">
  <h2>우리 가족 마법 마을</h2>
  <!-- 우리가 만든 'magic-button' 레고를 꺼내 써요! -->
  <magic-button label="사과 소환"></magic-button>
  <magic-button label="포도 소환"></magic-button>
  <magic-button label="치킨 소환"></magic-button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const app = Vue.createApp({});

  // 1. 'magic-button'이라는 이름의 레고 블록 정의하기
  app.component('magic-button', {
    props: ['label'], // 겉에 써질 글자를 받아와요
    template: `
      <button style="background-color: #42b983; color: white; border: none; padding: 10px; margin: 5px; border-radius: 5px;">
        {{ label }}
      </button>
    `
  });

  app.mount('#app');
</script>
Vue.js 마법 학교 4강: 나만의 레고 블록 만들기! (컴포넌트 마법)

4. 스마트 라이프를 위한 가족 코딩 팁

아이들과 함께 template 안의 색상(background-color)을 바꿔보세요. 버튼 하나만 고쳤는데 모든 버튼의 색이 한꺼번에 변하는 것을 보며 ‘재사용성’이라는 어려운 개념을 자연스럽게 깨닫게 될 거예요. 이것이 바로 전문가들이 웹사이트를 만드는 진짜 방식이랍니다!

마치며: 조립하는 재미, Vue.js의 매력

컴포넌트를 이해했다면 여러분은 이제 단순한 코딩을 넘어 ‘설계’를 시작한 거예요. 우리가 사는 집도, 사용하는 스마트폰 앱도 모두 이렇게 작은 부품들이 모여 만들어진답니다. 다음 시간에는 이 레고 블록들이 서로 대화하는 방법(Props와 Emit)에 대해 알아볼게요!

Related Posts