JAN's History

스벨트(Svelte)에서 이벤트 다루기! 본문

Svelte

스벨트(Svelte)에서 이벤트 다루기!

JANNNNNN 2024. 10. 21. 17:02

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 이벤트를 어떻게 다루는지 알아보려고 해요. 스벨트는 UI와 사용자 상호작용을 간편하게 관리할 수 있게 도와주는 아주 강력한 도구입니다. 그래서 이벤트를 통해 UI를 쉽게 다룰 수 있는데요! 그럼 Svelte에서의 이벤트 사용법에 대해 한 단계씩 살펴볼까요? 😊

1. Svelte 이벤트 기본 사용법

이벤트(event)는 사용자의 특정 동작을 감지하는 기능을 말합니다. 마우스 클릭, 키보드 입력 등 다양한 상황에서 발생할 수 있는데, 스벨트에서는 이러한 이벤트를 쉽게 처리할 수 있습니다.

이벤트 문법

on:이벤트명={이벤트함수}

예를 들어, 버튼 클릭 시 메시지를 출력하는 간단한 예제를 살펴보겠습니다.

<script>
  function showAlert() {
    alert('버튼이 클릭되었습니다!');
  }
</script>

<button on:click={showAlert}>클릭하세요!</button>

이렇게 버튼을 클릭하면 showAlert 함수가 실행되어 경고창이 나타납니다. 🔔

2. 마우스 이벤트 활용하기

스벨트에서는 마우스 이벤트를 활용해 다양한 기능을 구현할 수 있습니다. 여기서는 마우스가 요소 위에 있을 때 배경색을 변경하는 예제를 볼까요?

<script>
  let backgroundColor = 'lightblue';

  function changeColor() {
    backgroundColor = 'lightgreen';
  }

  function resetColor() {
    backgroundColor = 'lightblue';
  }
</script>

<div 
  style="width: 200px; height: 200px; background-color: {backgroundColor};" 
  on:mouseenter={changeColor} 
  on:mouseleave={resetColor}
>
  마우스를 이곳에 올려보세요!
</div>

여기서 mouseenter와 mouseleave 이벤트를 사용해 마우스가 들어가면 배경색이 바뀌고, 나가면 원래 색으로 돌아오게 했습니다. 🤩

3. 키보드 이벤트 처리하기

키보드 입력을 감지하여 특정 동작을 수행할 수도 있습니다. 이번에는 사용자가 입력한 텍스트를 보여주는 예제를 만들어 보겠습니다.

<script>
  let inputText = '';

  function updateText(event) {
    inputText = event.target.value;
  }
</script>

<input type="text" on:input={updateText} placeholder="텍스트를 입력하세요!" />
<h2>입력한 텍스트: {inputText}</h2>

사용자가 입력할 때마다 inputText가 업데이트되어, 화면에 실시간으로 반영됩니다! ✍️

참고로, 자바스크립트로 해당 예시를 작성한다면 아래와 같아요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 입력 예제</title>
</head>
<body>
    <input type="text" id="textInput" placeholder="텍스트를 입력하세요!" />
    <h2 id="displayText">입력한 텍스트: </h2>

    <script>
        const inputField = document.getElementById('textInput');
        const displayText = document.getElementById('displayText');

        // 입력 필드에 이벤트 리스너 추가
        inputField.addEventListener('input', function(event) {
            const inputValue = event.target.value; // 입력된 값 가져오기
            displayText.textContent = '입력한 텍스트: ' + inputValue; // 화면에 반영
        });
    </script>
</body>
</html>

4. 이벤트 매개변수와 화살표 함수

이벤트 핸들러에 매개변수를 전달할 때는 화살표 함수를 사용해야 합니다. 다음은 버튼 클릭 시 매개변수를 사용하여 다양한 메시지를 출력하는 예제입니다.

<script>
  function showMessage(message) {
    alert(`메시지: ${message}`);
  }
</script>

<button on:click={() => showMessage('첫 번째 버튼 클릭!')}>첫번째 버튼</button>
<button on:click={() => showMessage('두 번째 버튼 클릭!')}>두번째 버튼</button>

이렇게 하면 각 버튼을 클릭할 때마다 다양한 메시지를 출력할 수 있습니다! 🎉

5. 이벤트 수식어(Event Modifiers)

스벨트에서는 이벤트에 수식어를 추가하여 더욱 간편하게 이벤트를 제어할 수 있습니다. 가장 많이 사용하는 수식어 중 하나는 preventDefault입니다. 이를 사용하면 링크 클릭 시 페이지가 전환되지 않도록 막을 수 있습니다.

<script>
  function handleLink(event) {
    alert('링크 클릭 방지!');
    event.preventDefault(); // 기본 동작 취소
  }
</script>

<a href="https://example.com" on:click={handleLink}>여기를 클릭해보세요!</a>

이렇게 하면 링크를 클릭해도 페이지가 이동하지 않고 경고창만 나타납니다. 🔗

 

이처럼 스벨트에서는 다양한 이벤트를 쉽게 다룰 수 있습니다. 이벤트를 적절히 활용하면 사용자와의 상호작용을 더욱 풍부하게 만들어줄 수 있으니, 실제로 다양한 상황에 맞게 활용해보세요! 🙌

여러분의 공부에 도움이 되었길 바랍니다! 안녕히 계세요! 😊

'Svelte' 카테고리의 다른 글

Svelte에서 기본 상태 관리와 전역 변수 접근하는 방법 알아보기  (0) 2024.10.23
스벨트(Svelte)에서 Props 이해하기!  (0) 2024.10.21
스벨트(Svelte)에서 반응성 코드 활용하기! (자바스크립트와 비교)  (0) 2024.10.20
스벨트(Svelte) 에서 상태값 관리하기!  (0) 2024.10.19
스벨트 VSCode에서 실행하는 방법, 폴더 구조에 대해서 간략하게 알아보기📚  (2) 2024.10.19
'Svelte' Related Articles more