[꼭 만들자 Svelte로 프로젝트] - 기초(1)

라따뚜이·2022년 5월 28일
0

이 글은 스벨트로 시작하는 웹 프런트엔드 책을 기반으로 작성한 글입니다.

Props 전달방식은 react와 동일하다.

자식 컴포넌트(child Component)에서 부모 컴포넌트(parent Component)의 값을 변경하기 위해선 부모 컴포넌트에서 자식 컴포넌트에게 변경 메소드를 Props로 넘겨줘야 한다.

부모 컴포넌트.svelte

<script>
import Child from './child';

let count = 0

const handleClick = () => {
	count = count + 1;
}

</script>

<Child countVal={count} handleClick={handleClick}} />

자식 컴포넌트.svelte

	<script>
    //부모 컴포넌트에서 보내준 Props를 사용하려면 부모컴포넌트에서 보낸 변수명(countVal, handleClick)과 동일하게 작성해주어야 한다. 
    //이는 스벨트 규칙인 거 같다.
    //아니면 undefined로 출력된다.
    	export let countVal;
        export let handleClick;
    </script>
    
    <p> 전달된 값은 {countVal} </p>
    <button on:click={handleClick}>클릭</button>



위의 코드는 부모 컴포넌트에서 자식 컴포넌트로 변수를 보낼 때 변수명={값}으로 작성되어 있다.
하지만 변수명과 값의 이름이 동일하다면 아래와 같이
중괄호안에 변수명만 작성하면된다.


부모 컴포넌트.svelte


<Child {count} {handleClick} />




Props를 더 깊은 컴포넌트에게 전달하고 싶다면, 위와 같은 방식으로 전달해주면된다.

Parent.svelte ---> Middle.svelte ---> Child.svelte



Parent.svelte

<Middle {count} {handleClick} />



Middle.svelte

<script>
	export let count;
    export let handleClick;
    
    import Child from './child.svelte';
</script>

<Child {count} {handleClick} />




Child.svelte

<script>
  //자식 컴포넌트로 전달된 값은 'export let porps이름'과 같은 형태로 받아서 사용가능하다.
  export let count;
  export let handleClick;
</script>

<p>전달된 값은 {count} 입니다.</p>
<button on:click={handleClick}>클릭</button>



Prop 특징

Props는 위에서 아래로 전달되는 단방향적인 성격을 가지기 때문에 Props로 전달되는 값을 자식 컴포넌트에서 변경 시 부모컴포넌트에서 함수를 만들어 Props로 만든 함수를 자식 컴포넌트에게 전달하여 사용하는 방법을 사용한다.
만약에 너무나 깊은 level에서 Props를 가져다가 사용할 경우 코드 복잡성이 증가한다. 이를 Props drilling라고 하며, react에서는 react에서 제공하는 useContext hook을 사용하거나 redux, recoil등의 상태 관리 라이브러리를 사용하여 전역적으로 상태를 관리한다.

profile
돈만 준다면 해 노예

0개의 댓글