안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 예언가 타입스크립트와 함께 안전하게 주문을 짜는 법을 배웠죠? 오늘은 화면에 나타난 그림이나 글자를 마법 지팡이로 직접 톡! 건드려 조종하는 신기한 기술을 배울 거예요. 바로 화면 속 물건 지목하기, Template Refs(템플릿 참조) 마법입니다!
[IMAGE_1]
1. Template Ref: 마법 지팡이로 지목하기
보통 Vue.js는 데이터만 바꾸면 화면이 알아서 변하지만, 가끔은 화면에 있는 물건을 직접 붙잡아야 할 때가 있어요.
- 직접 조종: “저기 있는 입력창에 불을 켜줘!” 혹은 “이 그림의 높이가 얼마인지 재줘!”처럼 구체적인 심부름을 시킬 때 사용해요.
- 마법 연결선:
ref라는 마법 연결선을 화면 속 물건에 연결해두면, 나중에 주문서(스크립트)에서 그 연결선을 당겨 물건을 마음대로 움직일 수 있답니다.
2. 왜 이 마법이 필요한가요?
- 자동 포커스: 방에 들어가자마자 글을 쓸 수 있게 입력창을 자동으로 활성화할 수 있어요.
- 세밀한 측정: 화면 속 상자의 크기가 얼마인지, 스크롤이 얼마나 내려갔는지 정확히 알아내야 할 때 꼭 필요해요.
3. 실전 마법: 마법 지팡이로 입력창 깨우기
타입스크립트 예언가와 함께 안전하게 화면 속 입력창을 지목하는 코드를 짜볼까요?
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 1. 마법 연결선을 만들어요 (처음엔 비어있어요!)
const myInput = ref<HTMLInputElement | null>(null);
// 2. 성의 구성이 끝난 뒤(onMounted)에 물건을 건드려요
onMounted(() => {
if (myInput.value) {
myInput.value.focus(); // 입력창아, 깨어나라! 짠!
myInput.value.style.backgroundColor = '#fff9c4'; // 노란색으로 변신!
}
});
</script>
<template>
<div class="magic-room">
<h2>마법의 일기장 📖</h2>
<!-- 3. 물건에 마법 연결선(ref)을 이름표처럼 붙여요 -->
<input ref="myInput" type="text" placeholder="여기에 일기를 쓰세요!" />
</div>
</template>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘원격 조종 로봇’에 비유해 보세요. 내가 직접 가서 만지지 않아도 리모컨(Ref)으로 로봇의 팔을 움직이거나 눈을 깜빡이게 할 수 있는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 퀴즈를 다 풀었을 때, 다음 문제 입력창으로 자동으로 커서가 뿅! 하고 이동하게 이 마법을 써보세요. 아이는 컴퓨터가 자신의 마음을 읽고 미리 준비해주는 듯한 특별한 대우를 받는 기분을 느낄 것입니다.
마치며: 물건과 소통하는 마법사
이제 여러분은 데이터 뒤에 숨어있는 진짜 물건들까지 자유자재로 다루는 실력파 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 예고편(Async Components)’**이라는 주제로, 거대한 방을 필요할 때만 불러와서 성을 가볍고 빠르게 유지하는 비법을 배워볼게요! 내일 아침 9시에 만나요!
