반응형 변수
Reactive assignments
<!--./src/Component/Home/Home.svelte-->
<script>
//number 변수 선언
let number = 0;
//number가 1씩 더해지는 함수 선언
function plusNumber() {
number++;
}
//number가 1씩 빼지는 함수 선언
function minusNumber() {
number--;
}
</script>
<h1>Home</h1>
<!-- number를 화면에 보여준다. -->
<h2>number : {number}</h2>
<!-- 버튼 두개 생성 -->
<!-- 첫번째 버튼에는 on:click 에 plusNumber 함수를 넣어준다. -->
<button on:click={plusNumber}>Plus</button>
<!-- 두번째 버튼에는 on:click 에 minusNumber 함수를 넣어준다. -->
<button on:click={minusNumber}>Minus</button>
이제 Plus버튼을 누르면 number변수는 1이 증가하고 Minus버튼을 누르면 number는 1씩 감소된다.
그렇다면 화면에 보이는 숫자는 변경이 될까?
잘 변경된다.
Reactive declarations
위와 같은 방법으로 Home컴포넌트에 number2와 플러스마이너스 함수도 만들어 보자.
간단하게 하기 위해서 script태그 안에 내용을 복붙후에 변수와 함수뒤에 "2"만 붙여주도록 하고 number2역시 화면에 보여주도록 하겠다.
보기 편하게 html에 스타일을 조금 주겠습니다~!
<!--./src/Component/Home/Home.svelte-->
<h1>Home</h1>
<div class="numbers-container">
<div class="number-container">
<h2>number : {number}</h2>
<button on:click={plusNumber}>Plus</button>
<button on:click={minusNumber}>Minus</button>
</div>
<div class="number-container">
<h2>number2 : {number2}</h2>
<button on:click={plusNumber2}>Plus</button>
<button on:click={minusNumber2}>Minus</button>
</div>
</div>
<style>
.numbers-container {
display: flex;
}
.number-container {
margin: 0 20px 0 20px;
}
</style>간단하게 div태그로 감싸고 스타일만 준거니 복붙하시면 되겠습니다.
이제 number와 number2의 합친값을 화면에 보여주려한다.
<!--./src/Component/Home/Home.svelte-->
<sciprt>
//추가 할 내용...
let sum = number + number2;
</script>
<!-- 추가 할 내용... -->
<!-- .numbers-container의 최하단에 추가해주자 -->
<div class="number-container">
<h2>sum : {sum}</h2>
</div>
버튼을 눌러도 sum은 변화가 없다.
sum 변수가 number 혹은 number2의 값변경에 의해서 같이 변하게 하는 방법은 아주 간단하다.
sum 앞에 let 을 $: 로 변경만 해주면 된다.
<!--./src/Component/Home/Home.svelte-->
<sciprt>
//이전에 선언된 sum
//let sum = number + number2;
//이렇게 선언하면 끝이다.
$:sum = number + number2;
</script>
Reactive statement
<!--./src/Component/Home/Home.svelte-->
<script>
//추가 할 내용...
//sum이 변경될 때마다 if문을 실행한다.
$:if (sum === 10){
alert('합은 10입니다.')
}
</script>
if문이 실행되는게 확인 된다.
만약에 $: 코드에 sum, number 두가지 변수가 포함되어 있다면 sum 혹은 number 변수 둘 중에 하나라도 변경이 된다면 $: 코드가 실행이 된다.
전체코드
<!--./src/Component/Home/Home.svelte-->
<script>
//number 변수 선언
let number = 0;
let number2 = 0;
$: sum = number + number2;
//number가 1씩 더해지는 함수 선언
function plusNumber() {
number++;
}
//number가 1씩 빼지는 함수 선언
function minusNumber() {
number--;
}
function plusNumber2() {
number2++;
}
//number가 1씩 빼지는 함수 선언
function minusNumber2() {
number2--;
}
$: if (sum === 10) {
alert('합은 10입니다.');
}
</script>
<h1>Home</h1>
<div class="numbers-container">
<div class="number-container">
<h2>number : {number}</h2>
<button on:click={plusNumber}>Plus</button>
<button on:click={minusNumber}>Minus</button>
</div>
<div class="number-container">
<h2>number2 : {number2}</h2>
<button on:click={plusNumber2}>Plus</button>
<button on:click={minusNumber2}>Minus</button>
</div>
<div class="number-container">
<h2>sum : {sum}</h2>
</div>
</div>
<style>
.numbers-container {
display: flex;
}
.number-container {
margin: 0 20px 0 20px;
}
</style>
개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!
'프레임워크\라이브러리 > Svelte' 카테고리의 다른 글
| [Svelte] 논리문법 each 블록 (0) | 2022.02.10 |
|---|---|
| [Svelte] 논리문법 if , else, if else 블록 (0) | 2022.01.30 |
| [Svelte] 페이지 라우팅, svelte-routing (0) | 2022.01.23 |
| [Svelte] 컴포넌트 및 변수, props (0) | 2022.01.19 |
| [Svelte] 변수 (0) | 2022.01.18 |
