state

state는 말그대로 컴포넌트의 어떤 상태를 나타내거나 컴포넌트에 표시할 데이터 혹은 데이터의 집합이라고 기억하시면 되겠습니다. 이 state는 바로 다음에 설명드릴 reactivity 즉 반응성과도 매우 관련이 있습니다. 컴포넌트의 모양이나 표시되는 내용은 모두 이 state에 의해 결정됩니다.

우선 state를 정의하고 사용하는 방법에 대해서 알아보도록 하겠습니다.

svelte는 아주 단순하게는 요약하면 state와 state를 바라보는 component 그리고 이 둘이 서로 영향을 주고 받으면서 화면을 그려 구성해 가는 것이라고 이해될 것입니다.

선언된 state의 사용방법은 <script> 영역에서는 일반적인 자바스크립트 변수 처럼 사용가능하고, html 영역에서는 { state이름 } 와 같이 {} 태그를 이용해 값을 표현할 수 있습니다.

<script>
	let value = '안녕하세요. svelte 강좌 입니다.'
	let active = false
</script>

<p> {value} </p>

<input type="checkbox" bind:checked={active} /> {active}

또는 다음과 같이 배열도 state가 됩니다.

<script>

let list = [
	{
    id:0,
    content: '첫 번째 할일',
    done: false
  },
  {
    id:1,
    content: '두 번째 할일',
    done: false
  },
  {
    id:2,
    content: '세 번째 할일',
    done: true
  },
  {
    id:3,
    content: '네 번째 할일',
    done: false
  }	
]
</script>

<ul>
	{#each list as item}
		<li>
			<p>{item.content}</p>
		</li>
	{/each}
</ul>

이런 상태값을 나타내는 문법이 다른 프레임워크의 경우 자체적으로 특정 규칙을 사용하여 적용해야 하지만 svelte의 경우 자바스크립트 기본 변수 지정 방법인 let또는 const를 사용하여 처리합니다. 이부분 역시도 코드량을 줄이는데 함몫을 합니다.

// svelte
let a = 1;
let b = 2;

// react
export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
...
}

// vue
export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };

한번 선언된 state는 자바스크립트의 재할당 문법을 사용해서 쉽게 변경할 수 있습니다.

여기서 handleClick이라는 함수가 호출되면 이 함수는 count를 +1 해서 재할당 시킵니다. 그러면 count를 사용하는 곳에서는 모두 자동적으로 +1된 count가 표시 또는 사용됩니다. (count =+1은 count = count + 1 과 같습니다. ) 여기서 주의할 점은 꼭 자바스크립트 배열 메소드를 state에 직접 사용하지 말고, 메소드 적용 후 다시 '=' 로 재할당 시켜주어야 하는 것을 기억해야 합니다. 혹은 ... 스프레드 연산자를 사용해도 됩니다.

<script>
let count = 0

function handleClick() {
	// 이벤트 코드
	// count = count + 1
	count =+ 1
}

</script>

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

[만들면서 배우는 Svelte]

Last updated