안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 성 안에 여러 방을 만드는 법을 배웠어요. 그런데 거실에서 얻은 보물을 안방에서도 확인하고 싶다면 어떻게 해야 할까요? 오늘은 모든 방에서 똑같이 접근할 수 있는 마법 금고, Pinia(피니아)를 소개합니다!
1. 마법 금고: 누구나 열 수 있는 보물함
컴포넌트들이 부모와 자식 사이에서만 대화(Props/Emit)하는 건 가끔 너무 복잡할 때가 있어요. 멀리 떨어진 방끼리는 소식을 전하기 힘들거든요. 이럴 때 성 한가운데에 커다란 마법 금고를 하나 두는 거예요.
누구든 보물을 얻으면 이 금고에 넣고, 누구든 필요할 때 금고에서 보물을 꺼내 볼 수 있답니다. 이렇게 하면 ‘나의 이름’이나 ‘가족 포인트’ 같은 중요한 정보를 모든 방에서 똑같이 공유할 수 있어요.
2. 금고의 3가지 마법 도구
- State (보물들): 금고 안에 들어있는 실제 물건들이에요. (예: 마법 점수: 100점)
- Getters (돋보기): 금고 속 보물을 특별하게 계산해서 보여줘요. (예: “점수를 2배로 계산하면 얼마지?”)
- Actions (금고지기): 금고 속 보물을 넣거나 바꾸는 명령을 내려요. (예: “점수를 10점 올려줘!”)
3. 실전 마법: 우리 집 공용 점수판 만들기
어느 방에서든 점수를 올리면 모든 곳에 똑같이 반영되는 금고 마법의 원리를 살펴볼까요?
// 1. 마법 금고(Store) 만들기
const useStore = defineStore('counter', {
state: () => ({ count: 0 }), // 보물: 0점부터 시작!
actions: {
increment() {
this.count++; // 금고지기가 점수를 올려요
}
}
});
// 2. 어느 방(컴포넌트)에서든 이렇게 써요!
const store = useStore();
console.log(store.count); // 금고 안의 점수 확인
store.increment(); // 금고지기에게 점수 올리기 부탁!
4. 스마트한 가족 활동을 위한 응용
아이들과 함께 상상해 보세요. ‘우리 집 칭찬 포인트 앱’을 만든다고 할 때, 아이 방 컴퓨터에서 포인트를 확인하고 거실 TV에서도 같은 포인트를 볼 수 있는 것이 바로 이 마법 금고 덕분입니다. 게임 속 인벤토리(가방)가 어떤 맵을 가더라도 똑같이 유지되는 원리와도 같죠!
마치며: 조화로운 마법의 성 완성하기
이제 여러분은 데이터를 아주 안전하고 편리하게 관리하는 법까지 알게 되었습니다. 이제 정말 거대한 프로그램을 만들 준비가 다 되었어요! 다음 시간에는 이 모든 마법을 부릴 수 있게 도와주는 **’마법사 보조 도구(Vue Devtools)’**를 활용해 마법의 버그를 잡는 법을 배워볼게요!
