state
state는 말그대로 컴포넌트의 어떤 상태를 나타내거나 컴포넌트에 표시할 데이터 혹은 데이터의 집합이라고 기억하시면 되겠습니다. 이 state는 바로 다음에 설명드릴 reactivity 즉 반응성과도 매우 관련이 있습니다. 컴포넌트의 모양이나 표시되는 내용은 모두 이 state에 의해 결정됩니다.
우선 state를 정의하고 사용하는 방법에 대해서 알아보도록 하겠습니다.
svelte는 아주 단순하게는 요약하면 state와 state를 바라보는 component 그리고 이 둘이 서로 영향을 주고 받으면서 화면을 그려 구성해 가는 것이라고 이해될 것입니다.
선언된 state의 사용방법은 <script> 영역에서는 일반적인 자바스크립트 변수 처럼 사용가능하고, html 영역에서는 { state이름 } 와 같이 {} 태그를 이용해 값을 표현할 수 있습니다.
또는 다음과 같이 배열도 state가 됩니다.
이런 상태값을 나타내는 문법이 다른 프레임워크의 경우 자체적으로 특정 규칙을 사용하여 적용해야 하지만 svelte의 경우 자바스크립트 기본 변수 지정 방법인 let또는 const를 사용하여 처리합니다. 이부분 역시도 코드량을 줄이는데 함몫을 합니다.
한번 선언된 state는 자바스크립트의 재할당 문법을 사용해서 쉽게 변경할 수 있습니다.
여기서 handleClick이라는 함수가 호출되면 이 함수는 count를 +1 해서 재할당 시킵니다. 그러면 count를 사용하는 곳에서는 모두 자동적으로 +1된 count가 표시 또는 사용됩니다. (count =+1은 count = count + 1 과 같습니다. ) 여기서 주의할 점은 꼭 자바스크립트 배열 메소드를 state에 직접 사용하지 말고, 메소드 적용 후 다시 '=' 로 재할당 시켜주어야 하는 것을 기억해야 합니다. 혹은 ... 스프레드 연산자를 사용해도 됩니다.
Last updated