[SVELTE] svelte-script

Svelte script

script 블락은 컴포넌트 인스턴스가 생성 되었을 때 실행되는 script 입니다. 변수를 선언하거나 import를 최상위에서 선언한 경우, 해당 컴포넌트 마크업 구조에서 사용이 가능합니다. 이 script에는 4가지 조건이 존재합니다.

export creates a component prop

<script>
    export let foo;

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

svelte는 export예약어를 사용하여, 해당 컴포넌트로 전달되는 props 를 정의합니다. 이렇게 정의된 props는 컴포넌트의 consumer에서 접근이 가능합니다.

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

또한 개발자는 props의 기본 값을 미리 지정해 줄 수 있습니다. 이 것은 해당 컴포넌트를 사용하는 consumer에서 props를 구체적으로 정의하지 않은 경우, 대신하게 됩니다. props가 consumer에 의해 전달되지 않은 경우, 기본 값은 undefined로 할당 되게 됩니다.

개발중인 상황에서는 기본 값을 지정해주지 않은 경우, 컴파일러에 의해 props로 지정된 값들이 없다고 표시될 것입니다. (컴파일러 옵션 에서 제거 가능합니다. ) 확실한 값을 지정해주셔야 합니다. 혹여 기본 값이 undefined 일지라도 이를 구체적으로 할당해주셔야 합니다.

<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>

만약 export 명령어를 이용하여, const, class,function 들을 방출 한다면, 이것은 컴포넌트 외부에서 읽기만 가능한 값이 됩니다. 그러나 함수 표현식으로 설정된 export 문은 여전히 props로 작동합니다 .

<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>

props의 이름은 class 혹은 function같은 예약어로 변경 할 수 도 있습니다.

Assignments are ‘reactive’

<script>
    let count = 0;

    function handleClick () {
        // calling this function will trigger an
        // update if the markup references `count`
        count = count + 1;
    }
</script>

컴포넌트의 상태를 변경하거나, 새롭게 렌더링을 원하는 경우 할당 =을 이용해서 가능합니다.

Update 구문인 (count += 1) 과 프로퍼티 할당 (obj.x = y) 는 동일한 효과를 발생시킵니다.

이것이 가능한 이유는 스벨트는 반응성을 할당에 두고 있습니다. 그렇기에 배열의 메소드인 push 혹은 pop과 같은 함수 들은 렌더 트리거를 호출 하지 않습니다.

$ marks a statement as reactive

<script>
    export let title;

    // this will update `document.title` whenever
    // the `title` prop changes
    $: document.title = title;

    $: {
        console.log(`multiple statements can be combined`);
        console.log(`the current title is ${title}`);
    }
</script>

어떤 최상위 상태도 $ : (js label syntax)를 이용하여 반응성을 가지도록 할 수 있습니다. 반응성 구문은 컴포넌트가 값의 변경에 의해 업데이트 되기 전에 신속하게 실행됩니다.

<script>
    let x = 0;
    let y = 0;

    function yPlusAValue(value) {
        return value + y;
    }

    $: total = yPlusAValue(x);
</script>

Total: {total}
<button on:click={() => x++}>
    Increment X
</button>

<button on:click={() => y++}>
    Increment Y
</button>

오직 $ : 블럭 안에 있는 값이 변경 되었을 경우에만, 해당 변수는 반응성을 가집니다. 위의 예제에서 $ : total 구문은 x변수가 변경 될 때만 반응성을 띕니다.

<script>
    export let num;

    // we don't need to declare `squared` and `cubed`
    // — Svelte does it for us
    $: squared = num * num;
    $: cubed = squared * num;
</script>

반응성 구문은 특정 변수에 반응성을 띄게 되기 때문에 상수타입이 아닌 변수타입입니다.

Prefix stores with $ to access their values

<script>
    import { writable } from 'svelte/store';

    const count = writable(0);
    console.log($count); // logs 0

    count.set(1);
    console.log($count); // logs 1

    $count = 2;
    console.log($count); // logs 2
</script>

store는 간단한 값의 할당으로 만들 수 있는 반응성을 가지는 객체입니다.

언제든지, 스토어 앞에 $ 를 사용하여, store에 대한 참조를 만들 수 있습니다. 이로 인하여, 스벨트는 사전에 변수를 정의하고 적절한 시점에 스토어의 구독을 설정 할 수 있습니다.

$표시가 붙은 변수에 재 할당이 실행 될때는 writeable 한 스토어 여야 하며, 할당이 이루어질 때는 store의 set 함수를 호출 합니다.

store는 최상위 위치에서 선언 되어야 하며 if 혹은 함수 블럭 내부에서 선언되면 안됩니다.

store 값을 전달하지 않는 지역변수는 절대로 $를 접두사로 이용하면 안됩니다.

#svelte #svelteJSBlock