[Svelte강좌] 7강 Logic - if blocks - 오쌤의 니가스터디

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. if block(논리 블록) 

---

- 컴퓨터 프로그램을 이루는 요소 중 대표적인 구문이 바로 조건문과 반복문입니다.

- 기본적으로 HTML은 위에서 말한 두 구문이 없지만, 자바스크립트는 두 구문을 가지고 있습니다.

- 반복 관련은 다음 강좌에서 보고, 이번 강좌에서는 조건문 관련만 보도록 하겠습니다.

- svelte에서는 마크업 영역에서 조건을 사용할 수 있는 [ if block ]이라는 것을 제공합니다. 

 

 

 

 

 

 

1) if block

- [ if block ] 중 기본적인 구문입니다.

- 조건이 true일 경우에만 마크업 영역을 표시합니다.

 

## 문법

{#if 조건}
	<!--조건이 true일때 마크업 표시-->
{/if}

 

 

## 코드 보기

- 이번 코드는 버튼을 토글 상태로 만들겠습니다. [로그인/로그아웃]

- 보통 홈페이지들이 로그인을 하면 로그인한 정보를 볼 수 있습니다. 

- [로그인]을 누르면 [로그아웃]으로 바뀌고, [로그아웃]을 누르면 [로그아웃]되었다고 만들도록 하겠습니다. 

- 그리고 하단에 [현재 로그인 상태입니다./현재 로그아웃 상태입니다.]라는 텍스트로 추가해볼게요.

<script>
	let user = { loggedIn: false };

	function toggle() {
		user.loggedIn = !user.loggedIn;
	}
</script>

{#if user.loggedIn}
	<button on:click={toggle}>
		로그아웃
	</button>
	<p>현재 로그인상태입니다.</p>
{/if}

{#if !user.loggedIn}
	<button on:click={toggle}>
		로그인
	</button>
	<p>현재 로그아웃상태입니다.</p>
{/if}

-  user 에는 객체 형태로 상태값으로  loggedIn 이라는 것을 처리했습니다. 

- 그리고  loggedIn 은 true/false를 갖는 불 표현식으로 데이터를 처리할 거고, 초기값은  false 로 지정했습니다. 

-  toggle() 메서드를 통해  loggedIn 을 true/false로 변경할 수 있게 작성했습니다.

- 마크업 영역에는  loggedIn 이 true인 경우와 false인 경우가 다르게 나타나도록  if block 을 사용했습니다. 

 

 

## 결과 보기

- 실행해보면 상태 값에 따라 결과가 달라지는 것이 확인됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

2) else block

- if문은 보통 else문과 같이 많이 사용됩니다. 

- if파트는 보통 true인 경우를 표시, else인 경우는 false인 것을 표시하죠?

- svelte의  if block 도  else 문을 지원합니다. 

 

 

## 문법

{#if 조건}
	<!--조건이 true일 때 마크업표시-->
{:else}
	<!--조건이 false일 때 마크업표시-->
{/if}

 

 

 

## 코드 보기

- 위의 코드에서는  false 인 경우를 표시하기 위해 논리 연산자 중 부정 연산자(!)를 사용해서  false 를 사용했습니다.

- 이번에는  else 를 사용해서 한번 [로그인/로그아웃]을 만들어 보겠습니다. 

<script>
	let user = { loggedIn: false };

	function toggle() {
		user.loggedIn = !user.loggedIn;
	}
</script>

{#if user.loggedIn}
	<button on:click={toggle}>
		로그아웃
	</button>
	<p>현재 로그인상태입니다.</p>
{:else}
	<button on:click={toggle}>
		로그인
	</button>
	<p>현재 로그아웃상태입니다.</p>
{/if}

- 바뀌 부분은 [ {/if} {#if !user.loggedIn} ] 이 두 줄이, [ {:else} ] 한줄로 바뀌었습니다.

 

 

 

## 결과 보기

- 결과는 위와 크게 다르지 않은 것이 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3) else if block

- 결과가 [ true/false ]로만 나뉘는 일은 많이 없습니다.

- 물론, 남/여, 수신/미수신 같은 것들이 있긴 하지만 대부분은 많은 결과로 나뉩니다. 

- 그런 구문이 바로  if else if 문입니다. if를 여러 번 쓴다고 해서 다중 if라고도 합니다.

- svelte도 역시 [ else if block ]을 제공합니다. 

 

## 문법 보기

{#if 조건1}
	<!--조건1이 true일 때 마크업표시-->
{:else if 조건2}
	<!--조건2가 true일 때 마크업표시-->
{:else}
	<!--조건1과 조건2가 false일 때 마크업표시-->
{/if}

- [ {:else if 조건} ]은 여러 개 써도 됩니다. 

 

 

 

 

## 코드 보기

- 이번에는 input상자에 입력한 숫자가 양수인지, 음수인지, 0인지, 그 외의 값을 적었는지 보도록 하겠습니다.

<script>
	let x = null;

	function numChange(e){
		x = e.target.value;
	}
</script>

<label for="testbBox">양수/음수 테스트</label>
<input type="text" id="testbBox" on:keyup={numChange} placeholder="정수를 입력하세요.">

{#if x > 0}
	<p>작성한 숫자는 양수입니다.</p>
{:else if x < 0}
	<p>작성한 숫자는 음수입니다.</p>
{:else if x === '0'}
	<p>작성한 숫자는 0입니다.</p>
{:else}
	<p>정수로 다시 입력하세요.</p>
{/if}

- 변수 x에는 상태값을 받을 예정입니다. 처음 값은 비워두기 위해 [ null ] 키워드를 사용했습니다.

- 그리고  numChange() 메서드를 만들어 input상자에 입력한 값으로 상태 값이 바뀌게 처리했습니다.

- 마크업 부분에 [ on:keyup ]이벤트로  numChange() 메서드를 활성화시켰습니다.

- 사실 이렇게 쓰지 않아도, svelte는 바인딩(Binding)기능이 있습니다. 하지만 아직 배우지 않았으니 이렇게 해볼게요.

- 그리고 하단 부분에 [ if block ]들을 사용하여 입력된 상태 값에 따라 결과를 다르게 도출하게 p태그를 작성했습니다.

- 특히, 조건 중 0은 문자열로 처리해야 하고 완전 항등 연산자( === )를 사용해야 합니다.

- 안 그러면, 값을 비웠을 때도 0의 결과와 같게 처리되게 때문입니다.

- 입력 상자에 적는 숫자는 숫자 데이터가 아니란 점도 잘 기억하세요.

 

 

## 결과 보기

- 입력한 값에 따라 결과가 계속 바뀌는 것이 확인됩니다. 

- 특히, [ {:else if x === '0'} ]일 때와 [ {:else if x == 0 } ]일 때를 잘 비교해서 보세요. 잘 써야 하겠죠?