[Alpine.js] Alpine.js 시작하기

카테고리 없음

[Alpine.js] Alpine.js 시작하기

developer of the night sky 2023. 12. 22. 17:38

Alpine.js🔎

HTML에 인라인 JavaScript를 사용하여 간단한 인터랙티브 웹 애플리케이션을 만들 수 있도록 도와주는 라이브러리이다.

알파인.js는 가벼우면서도 강력한 기능을 제공하며, 다른 복잡한 프론트엔드 프레임워크나 라이브러리에 비해 진입 장벽이 낮다.

공식 사이트에 사용방법이 매우 잘 나타나 있다.

공식 사이트 :

https://alpinejs.dev/start-here

Start Here — Alpine.js

Start Here Create a blank HTML file somewhere on your computer with a name like: i-love-alpine.html Using a text editor, fill the file with these contents: Open your file in a web browser, if you see I ❤️ Alpine, you're ready to rumble! Now that you're

alpinejs.dev

Alpine.js 시작하기🔎

개발 툴은 VS Code 로 작업하였다.

index.html

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <h1 x-data="{ message: 'I Love Alpine' }" x-text="message"></h1>
</body>
</html>

- 증감 카운터 만들기

CMD 가져오기

알파인.js 를 사용하기 위해 아래 한줄을 헤더에 추가한다.

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <div x-data="{count:0}">
        <button x-on:click="count--">minus(-)</button>
        <span x-text="count"></span>
        <button x-on:click="count++">plus(+)</button>
    </div>

간단하게 숫자를 카운트 할 수 있는 버튼과 값을 나타낼 수 있다.

이 코드에서는 3개의 속성으로 카운터를 구성하였다.

1. 데이터 선언

<div x-data="{ count: 0 }">

Alpine의 모든 것은 x-data지시문으로 시작된다.

내부에서는 x-data일반 JavaScript로 Alpine이 추적할 데이터 객체를 선언한다.

2. 이벤트 수신

<button x-on:click="count++">Increment</button>

x-on요소는 모든 이벤트를 수신하는 데 사용할 수 있는 지시어이다.

x-on:click은 click 이벤트를 수신한다.

mouseenter 이벤트는 x-on:mouseenter 와 같이 사용한다.

3. 변화에 반응

<h1 x-text="count"></h1>

x-text요소는 텍스트 내용을 JavaScript 표현식의 결과로 설정하는 데 사용하는 Alpine 지시문이다.

위에서 x-data로 선언한 데이터가 사용된다.

- 드롭다운 만들기

     <div x-data="{open: false}">
        <button @click="open =! open">Toggle</button>
        
        <div x-show="open" @click.outside="open = false">about dropdown</div>
     </div>

간단하게 토글 버튼을 생성하였다.

1. 요소 전환

<div x-show="open" ...>Contents...</div>

x-show 는 페이지에서 HTML 블록을 표시하고 숨기는데 사용하는 지시어이다.

2. 외부에서도 클릭 수신하기

<div ... @click.outside="open = false">Contents...</div>

@click.outside 이벤트 핸들러를 사용하여 드롭다운 외부를 클릭할 때 open 변수를 false로 설정하여 드롭다운을 닫는다. 이 핸들러를 사용하면 드롭다운이 열린 상태에서 다른 곳을 클릭해도 드롭다운이 닫힌다.

- 검색하기

     <div
        x-data="{
            search: '',

            items: ['susu', 'kkang', 'Heo'],

            get filteredItems() {
                return this.items.filter (
                    i => i.startsWith(this.search)
                )
            }
        }">

        <input x-model="search" placeholder="Search...">

        <ul>
            <template x-for="item in filteredItems" :key="item">
                <li x-text="item"></li>
            </template> 
        </ul>
     </div>

기본적으로 모든 항목이 페이지에 표시되고 텍스트 입력을 하면 필터링을 한다.

입력하는 동안 목록은 검색중인 내용을 반영하여 변경된다.

1. 게터를 사용하여 계산된 속성

<div
    x-data="{
        search: '',
 
        items: ['foo', 'bar', 'baz'],
 
        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>

items 으로 JavaScript 배열에 값을 설정한다.

get filteredItems()

x-data 디렉티브 내에서 선언되어 JavaScript의 게터(getter) 메서드로 작동한다.

객체의 속성처럼 접근되지만 함수처럼 동작하는 함수이다.

get 키워드를 사용하면, filteredItems를 마치 변수처럼 접근할 수 있지만 실제로는 함수로 동작하게 만들 수 있다. 그러면 알파인은 filteredItems를 호출할 때마다 자동으로 해당 함수를 실행하고 결과를 반환한다.

이렇게 함으로써 코드가 더 간결하고 읽기 쉬워지며, 계산된 속성이 필요할 때마다 자동으로 갱신될 수 있다.

filteredItems 함수는 현재 검색어에 따라 필터링된 항목들을 반환하는 메소드로 정의하였다.

this

위에서는 속성을 참조하는데 just 속성명만 사용하였다. 하지만 x-data 객체 내에서 직접 작업하고 있을 때는 다르다.

x-data 객체 내에서 속성을 참조할 때는 [property] 대신에 this.[property]를 사용해야 한다.

2. 입력에 바인딩

<input x-model="search" placeholder="Search...">

x-model 은 입력 요소의 값을 데이터 속성과 "바인딩"하는데 사용된다.

즉, 입력 값이 변경될 때마다 "search" 의 값도 이를 반영하여 변경된다.

3. 반복 요소

    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>

x-for

x-for표현식은 [item] in [items] 형식으로 취한다.

여기서 [items]는 데이터 배열이고 [item]은 루프 내부 반복에 할당될 변수의 이름이다.

x-for 디렉티브를 사용하여 filteredItems 배열을 순회하면서 각 항목에 대한 <li>(리스트 아이템)를 생성한다.

:key

:key 바인딩을 사용하여 각 항목에 고유한 키를 부여한다. x-text 디렉티브와 함께 사용하여 각 리스트 아이템에 해당 항목의 텍스트를 표시한다.

또한, 각 요소에 대해 특정한 값을 지정하며, 이 값은 해당 요소가 변경되었을 때 프레임워크에게 어떤 요소가 바뀌었는지 알려준다.

저작자표시 (새창열림)