Svelte Script Tag에 대해 알아보자 - OhMinsSup/tip-review GitHub Wiki

<script> 태그

script 블록에는 구성 요소 인스턴스가 생성 될 때 실행되는 JavaScript가 포함됩니다.

svelte script에는 4가지 규칙이 존재합니다.

1. export는 컴포넌트의 props를 생성한다.

Svelte는 export를 사용해서 변수를 속성 또는 props로 나타냅니다.
즉, props는 컴포넌트를 사용하는 곳에서 접근이 가능합니다.

<script>
	export let foo;

	// Values that are passed in as props
	// are immediately available
	console.log({ foo });
</script>

그리고 props는 기본값을 지정할 수 있습니다.

<script>
	export let bar = 'optional default value';
	export let baz = undefined;
</script>

class, const, function은 읽기 전용입니다. 그래서 props로 전달이 안되는데 변수값에 함수를 담아서 props로 전달하는 형태는 전달이 됩니다. 또한 이름도 변경이 가능한데 { a as rename } 이런식으로 변경이 가능합니다.

<script>
  // these are readonly
  export const thisIs = "readonly";

  export function greet(name) {
    alert(`hello ${name}!`);
  }

  // this is a prop
  export let format = n => n.toFixed(2);
</script>

2. 반응적이다.

props또는 속성 변수 상태를 변경하고 다시 렌더링을 트리거하려면 로컬로 선언 된 변수에 변화되는 값을 지정하면 dom이 반응성있게 변화가 됩니다. 또한 Svelte는 배열에 대한 반응성으로 push, splice등의 트리거로는 반응하지 않는다. 불변성을 지켜주면서 값을 변화 시켜야 트리거가 되어 변화가 일어난다.

<script>
	let count = 0;
  let arry = [{
    id: 1,
    text: "1",
  }]

	function handleClick () {
		// calling this function will trigger an
		// update if the markup references `count`
    count = count + 1;
    arry.concat({ id: 2, text: "2" });
    arry = [...arry, { id: 2, text: "2" }]
  }
  
</script>

3. Reactive Statements(&:)

$:은 Label 식별자(Identifier)가 $인 순수한 자바스크립트 Label 구문이며, Svelte는 이 구문에 특별한 의미를 부여하고 반응성을 자동으로 계측합니다. let 선언을 사용하지 않습니다.

계산된(computed) 변수 혹은 반응성 감시자(Watch) 정도로 생각하면 쉽습니다. 최상위 레벨에 유효 변수가 포함되어 있으면 값이 변경될 때마다 구문을 실행하기 때문에 다음과 같은 작성이 가능합니다.

<script>
  let count = 1;
  $: double = count * 2;
</script>

<h1>{double}</h1>
<button on:click={() => count += 1}>
  Increase!
</button>

Tip - $ store에서 사용하는 $

store는 간단한 연결을 통해서 값에 대한 반응성 엑세스를 허용하는 오브젝트입니다. svelte/store 모듈에는 상점에 관한 구현체들이 있습니다. store에 대한 참조가있을 때마다 $ 문자를 접두부로 붙여서 구성 요소 내부의 값에 액세스 할 수 있습니다. 이로 인해 Svelte는 접두사가 붙은 변수를 선언하고 적절한 경우 구독을 취소 할 상점 구독을 설정합니다.

⚠️ **GitHub.com Fallback** ⚠️