Page 37 -

예제의 자바스크립트 코딩 블록입니다. 여기에 작성된 코드들이 스벨트 컴포넌트 인스턴스가 생
성되어 실행될 때 동작합니다. 주로, 컴포넌트의 HTML 블록에 보일 변수들을 선언하고 조작하는
기능을 합니다.
3
<script> 안에 작성된 스크립트 블록의 기본적인 사용 패턴 네 가지를 간단히 알아보겠습니다.

4장 이후부터 자세히 설명해 나가겠습니다. “아, 이런 내용이구나”라고 생각하고 가볍게 읽고 넘 Hello, Svelte~!
어가면 좋습니다. 혹시, 모두 이해된다면 능력자! 그렇다면 4장 이후도 쉽습니다. 스벨트는 쉬우
니까요.

첫 번째로 컴포넌트 프로퍼티를 선언하여 사용합니다.

스크립트 블록 내에서 export를 사용해 변수를 선언하면 해당 변수는 컴포넌트 프로퍼티(props)가
됩니다.

프로퍼티 선언 예
<script>
export let name; // 개발자 모드에서 warning이 나와요. 다음처럼 초깃값을 쓰는 걸 추천
export let name="홍길동" // 상위 컴포넌트가 읽고 쓸 수 있는 값이 됩니다.
export const name = "홍길동" // 상위 컴포넌트는 읽을 수만 있어요.
export function greeting(name) { // 함수 형태로도 사용합니다.
alert("안녕하세요 ${name} 님!");
}
</script>

위 코드에 export를 사용해 선언된 변수들은 상위 컴포넌트에서도 접근할 수 있는 프로퍼티가 됩
니다.

두 번째로 스크립트 블록에 선언된 변수들은 반응형 변수(reactive variable)로 사용할 수 있습니다.

선언된 변수를 화면에 표시했거나 변수를 수정해서 화면을 다시 렌더링하고 싶다면 그냥 변수를

할당 연산자(=)를 사용해 변경하면 됩니다. 그러면 자동으로 화면이 바뀝니다. 렌더링을 위한 코
드는 작성할 필요가 없습니다.
하지만 주의할 점이 있습니다. 반응형으로 동작하게 하려면 반드시 할당 연산자(=)를 사용해야 합

니다. 특히 배열에서 요소를 다룰 때 .push(), .slice() 등을 이용하여 값을 변경하면 이 배열은
반응형 변수로서 동작하지 않습니다.

039