[Svelte강좌] 4강 Reactivity(반응성) - 오쌤의 니가스터디

 

 

 

 

 

** 영상으로 보실 분은 아래 주소를 클릭해주세요.

https://youtu.be/E9dlYwCcOfs

 

 

 

 

 

 

 

** 이번 강좌에서는 Svelte의 Reactivity(반응성)에 대해서 알아보겠습니다. 반응성이란 값이 변할 때 별다른 호출 없이 값이 같이 변하는 것을 말합니다. 당연한 말같이 들리겠지만, 다른 프레임워크를 통해 이 기능을 쓰려면 훨씬 더 복잡한 코드를 씁니다. 하지만 Svelte는 간단히 사용이 가능해집니다. 거기에는 [ $:  ]라는 반응성 코드가 있습니다. 

 

 

 

 

 

 

 

 

1. 삼항연산자를 통한 마크업에서의 반응성

---

- 일단 삼항연산자가 무엇인지 보도록 하겠습니다.

 

 

## 삼항연산자 문법

조건식?참표현식:거짓표현식;

- 연산되는 피연산자가 3개라는 의미로 삼항 연산자라고 부르지만, 실제로는 조건문입니다.

- 조건식이 맞으면 참표현식을 실행하고, 그렇지 않으면 거짓 표현식을 실행합니다.

 

 

## 문제

버튼을 클릭하면 숫자가 1씩 자동으로 증가되게 처리하시오.
단) 숫자가 1이하면 [time]을 뒤에 붙이고, 그렇지 않으면 [times]를 붙이시오.
ex) [clicked : 2 times]

- 숫자에 따라 뒤의 문자가 반응하는 코드를 작성해보겠습니다.

 

 

## 코드 보기

<script>
	let count = 0;
    
	function handleClick() {
		count++;
	}
</script>

<button on:click={handleClick}>
	클릭 수 : {count} {count > 1 ? 'times' : 'time' }
</button>

 

 

## 결과 보기

- 1일때만 time이고 클릭하면 숫자가 바뀌면서 뒤의 문자도 반응하여 바뀌게 됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 스크립트 반응성 코드 - $:

---

- 변수로 선언된 값을 참조하는 새로운 변수를 만들 때 앞에 붙여주면 됩니다.

- 이때 var, let, const 등의 키워드를 쓰지 않는다는 것을 기억해두세요.

- 변수 값이 변경되면 자동으로 감지하여 자동으로 함께 변경이 됩니다.

 

 

 

 

1) 변수 선언형 - $:

## 문법

$: 반응성변수 = 값;

 

 

## 코드 보기

<script>
	//변수선언
	let count = 1;

	//반응성 변수선언
	$: doubled = count * 2;
	$: square = count * count;


	function handleClick() {
		count++;
	}
</script>

<button on:click={handleClick}>
	클릭 : {count} 
</button>

<h3>두배구하기</h3>
<p>{count} × 2 = {doubled}</p>
<h3>제곱구하기</h3>
<p>{count} × {count} = {square}</p>

- count라는 변수를 참조하는 반응성 변수를 [ double ]과 [ square ]를 선언했습니다. 

- 그 값들이 마크업되서 문서에 출력되게 처리합니다.

 

 

 

## 결과 보기

- 클릭과 함께 하단의 p태그의 값들도 반응해서 잘 바뀝니다. 

 

 

 

 

 

 

 

 

 

 

2) $: 의 그룹화

- 코드 블록을 통해 그룹화할 수도 있습니다. 

- 블록으로 감싼 부분도 상태 값이 변경되면 자동으로 호출합니다. 

 

## 문법

$: {
	//그룹화할 코드 작성
}

 

 

## 코드 보기

<script>
	//변수선언
	let count = 1;

	//반응성 변수선언
	$: doubled = count * 2;
	$: square = count * count;

	//그룹화된 명령
	$: {
		console.log('두배값 : ' + doubled);
		console.log('제곱값 : ' + square);
	}

	function handleClick() {
		count++;
	}
</script>

<button on:click={handleClick}>
	클릭 : {count} 
</button>

<h3>두배구하기</h3>
<p>{count} × 2 = {doubled}</p>
<h3>제곱구하기</h3>
<p>{count} × {count} = {square}</p>

- 중간에 그룹화된 명령으로 각각의 반응성 변숫값을 그룹화해서 콘솔 창에 띄워보도록 하겠습니다. 

 

 

## 결과 보기

- 콘솔창의 값들도 클릭할 때마다 반응해서 계속 처리되는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

3) $: 조건절

- 반응성 코드에 조건절, 즉 if문을 사용해서 반응하게 처리할 수 있습니다.

 

## 문법

$: if(조건){ }

 

 

 

## 코드 보기

- 물품을 1~9개까지만 구매한다고 보도록 하겠습니다.

<script>
	//변수선언
	let count = 1;

	//조건절
	$: if(count >= 10){
		alert('10개이상 구매할 수 없습니다.');
		count = 9;
	}
	$: if(count <= 0){
		alert('최소구매개수는 1개입니다.');
		count = 1;
	}


	function plusHandle() {
		count++;
	}
	function minusHandle() {
		count--;
	}
</script>

<button on:click={minusHandle}>-</button>
<input type="text" value="{count}" style="width: 25px;">
<button on:click={plusHandle}>+</button>

- 마이너스 버튼을 클릭하면 1씩 감소하게 처리, 플러스 버튼을 클릭하면 1씩 증가하게 처리하겠습니다.

- 10이상으로 증가하지 못하게 반응성 코드로 경고창과 count의 상태 값을 컨트롤했습니다.

- 0이하로 감소하지 못하게 반응성 코드로 경고창과 count의 상태 값을 컨트롤했습니다. 

 

 

 

## 결과보기

- 9에서 플러스 버튼을 누르니, 경고창이 뜨고 증가되지 않는 것이 보입니다.

- 1에서 마이너스 버튼을 누르니, 경고창이 뜨고 감소되지 않는 것이 보입니다.