Svelte 강의 (6) - Assignments

<script>
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	Clicked {count}
	{count === 1 ? 'time' : 'times'}
</button>

 

Svelte는 DOM을 어플리케이션 상태와 동기화 하기 위해 반응성 시스템을 가지고 있다고 하는데

 

이는 이벤트에 대한 응답으로 DOM을 업데이트하고 유지하기 위한 기능을 말한다고 한다.

 

이 개념을 알아보는게 위의 예제인데..

 

JS에서는 함수를 function이라고 한다. 메서드, 함수 등으로 불리기도 하는데

 

JS에서는 함수는 

 

1. 특정 작업을 수행하는 기능

2. 직접 호출 가능

3. 재사용 가능

 

이런 특징이 있다. 메서드(Method)는 객체의 프로퍼티가 함수인 경우인데 실무에서는 그냥 통틀어서 부르기도 한다

 

C#이나 JAVA에서는 클래스 안에 작성되는 함수는 메서드라 부르고 뭐 그러는데...

 

나는 따로 구분지어서 말하는 사람은 못봤는데 사소한 것이라도 놓치지 않는다면 구분지으는 것도 괜찮지 않을까?

 

아무튼 function increment()는 증가라는 의미의 이름을 가지고 있고 

 

그 안에서는 count를 count+1 시키고 있다. (count += 1 / count++ 둘다 가능)

 

근데 저렇게 하면 count가 0일때 times라고 되어 있고 1일때는 time 2부터는 times라고 출력된다.

 

0도 time으로 띄우고 싶으면 삼항연산자부분을 조금 수정해보자.