Svelte 글자 바꾸기2

시작

• 글자 변수를 바꾸어 화면에 표현하는 것을 해봤으니, 이제 내가 직접 타이핑한 글자가 화면에 표현되게 하는 방법에 대하여 알아 보자.
• 여기서 우리는 바인딩이라는 개념에 대하여 대략 알 필요가 있다.
• 바인딩?
  • 뭔가 서로 역여 있는게 바인딩이다.
  • 바인딩(Binding)에 대하여 찾아보면 1way, 2way 이런 것들이 나올 것이다. 용어자체는 중요하지 않다.
  • 일단 앞서 해본 것이 일종의 1way 바인딩이다. 코드 내부의 어떤 로직에 의해서 변경된 값 등이 화면상에 출력만 되게 만드는 것이다.
  • 2way 바인딩은 화면상에서 변경한 값이 직접 변수에 할당 되어 변경되고, 반대로 변수를 변경하면 그것이 바로 화면상에도 반영되게 하는 것이다.
    • 예를 들어 text input box에 어떤 값을 쓰면 코드상에 변수도 그 값이 반영되어 바뀌어 있고, 그 변수 값을 코드상에서 바꾸면 화면의 text input box의 값도 바뀌는 것이다.

코딩

<script lang="ts">
	export let name: string;
	export const onClickButton = () => {
		bindText = 'change';
	}
	export let bindText = 'fistvalue';
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<p>{bindText}</p>
	<button on:click={onClickButton}>change</button>
	<input type="text" bind:value={bindText}>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

• bind:value 라는 것을 사용하여 bindText라는 변수를 input의 value에다가 할당 시켰다.
• change 버튼을 누르면 input 창의 값이 변한다.
• input창에 직접 텍스트를 타이핑 하면, <p>{bindText}</p> 로된 부분의 텍스트도 동시에 변경된다.
• 즉, 코드에서 bindText값을 바꾸면 즉시 input창에반영되고, 반대로 input창에 값을 바꾸어도, bindText변수에 그 값이 바로 반영된다.
• 2 way binding이 되는 코드이다. 이제 아래 코드도 한번 실행 시켜 보자 다른 점은 bind:value 대신 value에 변수만 할당한다.

<script lang="ts">
	export let name: string;
	export const onClickButton = () => {
		bindText = 'change';
	}
	export let bindText = 'fistvalue';
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<p>{bindText}</p>
	<button on:click={onClickButton}>change</button>
	<input type="text" value={bindText}>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

• 이렇게 하면 change 버튼을 눌러 bindText값을 변경하면 input창에 값은 변경되고 화면상에도 표기 되지만, input창에서 타입핑해서 값을 바꾸면  <p>{bindText}</p>부분이 변하지 않는다. binText에 input창에서 변경된 값을 넣어주지 않는 1way binding이 된다.