aiwebmake AI 웹메이커 커뮤니티
‹ 용어사전 목록
프론트엔드

x-data

Alpine x-data

💡 초보자 설명

Alpine.js가 그 HTML 덩어리에서 쓸 상태를 선언하는 속성

🧠 쉬운 비유·기억법

쉽게 말하면, 그 상자 안에서만 통하는 작은 메모장입니다. `open: false`처럼 시작 값을 적습니다.

📌 실제 사용 상황

`<div x-data="{ mobileOpen: false }">`가 헤더에 있으면 모바일 메뉴 열림 상태를 여기서 관리합니다.

⚠️ 주의사항

중괄호와 따옴표가 깨지면 메뉴가 아예 안 열립니다. Blade와 섞을 때는 `@js()`로 값을 넣는 편이 안전합니다.