JAN's History
스벨트(Svelte)에서 반응성 코드 활용하기! (자바스크립트와 비교) 본문
안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 정말 중요한 개념인 반응성 코드에 대해 알아보려고 해요. 스벨트에서는 값이 변할 때 UI가 자동으로 업데이트되도록 해주어서, 개발자가 더욱 직관적으로 상태를 관리할 수 있게 도와줍니다.
자바스크립트만 쓰던 저에게 스벨트는 뭔가 새로운 문법이라 신기하더라고요 ㅎㅎ
그럼 반응성 코드에 대해 한 단계씩 살펴볼까요? 😊
1. 반응성 코드란?
반응성 코드는 스벨트에서 상태값이 변경될 때 자동으로 UI에 반영되도록 하는 기능이에요. 이를 위해 스벨트는 $: 문법을 제공합니다. 이렇게 $:를 붙여주면, 해당 코드 블록은 스벨트에 의해 감지되고, 값이 바뀌면 자동으로 다시 실행됩니다.
<script>
let temperature = 25; // 초기 온도 값
// 반응형 변수 선언
$: celsius = temperature; // 섭씨
$: fahrenheit = (temperature * 9/5) + 32; // 화씨
function increaseTemperature() {
temperature++; // 온도 증가
}
</script>
<button on:click={increaseTemperature}>온도 증가</button>
<h1>섭씨: {celsius}°C</h1>
<h1>화씨: {fahrenheit}°F</h1>여기서 temperature라는 변수가 변할 때마다 celsius와 fahrenheit도 자동으로 업데이트되어 실시간으로 UI에 반영됩니다! 🔥
이걸 바닐라JS로 만들면 어떻게 될까요?
<!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>
<button id="increaseBtn">온도 증가</button>
<h1 id="celsiusDisplay">섭씨: </h1>
<h1 id="fahrenheitDisplay">화씨: </h1>
<script>
let temperature = 25; // 초기 온도 값
// 디스플레이 업데이트 함수
function updateDisplay() {
const celsius = temperature; // 섭씨
const fahrenheit = (temperature * 9 / 5) + 32; // 화씨
// 화면에 결과 표시
document.getElementById('celsiusDisplay').innerText = `섭씨: ${celsius}°C`;
document.getElementById('fahrenheitDisplay').innerText = `화씨: ${fahrenheit.toFixed(1)}°F`;
}
// 온도 증가 함수
function increaseTemperature() {
temperature++; // 온도 증가
updateDisplay(); // 디스플레이 업데이트
}
// 초기값 디스플레이
updateDisplay();
// 버튼 클릭 이벤트 등록
document.getElementById('increaseBtn').addEventListener('click', increaseTemperature);
</script>
</body>
</html>바닐라 JS로 작성하면 정말 길죠 ??
저는 바닐라 JS만 작성해왔어서 스벨트가 정말 신세계네요 ㅎㅎ..
2. 조건문을 활용한 반응성 코드
반응성 코드에서 조건문을 사용하여 특정 조건을 만족할 때만 동작하도록 만들 수도 있습니다. 예를 들어, 온도가 너무 높거나 낮을 때 경고 메시지를 표시하는 코드를 구현해볼게요.
<script>
let temperature = 25;
// 반응형 변수 선언
$: temperatureWarning = (temperature > 30 || temperature < 0) ? '경고: 비정상적인 온도!' : '';
function increaseTemperature() {
temperature++;
}
</script>
<button on:click={increaseTemperature}>온도 증가</button>
<h1>현재 온도: {temperature}°C</h1>
<h2>{temperatureWarning}</h2>여기서는 온도가 30도보다 크거나 0도보다 작을 때 경고 메시지가 출력되도록 했습니다. 이렇게 조건을 통해 반응성을 추가하면 더욱 동적인 UI를 만들 수 있어요! ⚠️
3. 그룹화된 반응성 코드
스벨트에서는 $:를 사용하여 여러 문장을 그룹화할 수 있습니다. 이를 통해 특정 상태가 변할 때 여러 작업을 함께 수행할 수 있어요.
<script>
let score = 0;
// 그룹화된 반응성 코드
$: {
if (score >= 100) {
alert("축하합니다! 점수가 100점에 도달했습니다."); // 알림
score = 100; // 점수 상한선
}
}
function addScore() {
score += 10; // 점수 증가
}
</script>
<button on:click={addScore}>점수 추가</button>
<h1>현재 점수: {score}</h1>
여기서는 점수가 100점 이상이 될 경우 경고 메시지가 나타나고, 점수는 100으로 고정됩니다. 반응성 코드로 여러 작업을 쉽게 처리할 수 있답니다! 🎉
이와 같이 스벨트에서는 반응성 코드를 통해 사용자 인터페이스를 보다 유연하게 관리할 수 있습니다. 반응성 시스템을 활용하면 코드의 효율성을 높이고, 업데이트가 간편해지니 꼭 잘 활용해보세요! 😄
여러분의 공부에 도움이 되었길 바랍니다. 오늘도 화이팅하세요! 🙌
'Svelte' 카테고리의 다른 글
| 스벨트(Svelte)에서 Props 이해하기! (0) | 2024.10.21 |
|---|---|
| 스벨트(Svelte)에서 이벤트 다루기! (0) | 2024.10.21 |
| 스벨트(Svelte) 에서 상태값 관리하기! (0) | 2024.10.19 |
| 스벨트 VSCode에서 실행하는 방법, 폴더 구조에 대해서 간략하게 알아보기📚 (2) | 2024.10.19 |
| 스벨트(Svelte)! 웹 개발의 새로운 친구 🥳 (1) | 2024.10.19 |
