# 컴포넌트 통신방법 1 : props

state 즉 상태값은 해당 state를 만든 자기자신 컴포넌트에서만 쓰이는 경우도 있지만 state를 다른 컴포넌트에서전달해서 사용하는 경우도 매우 많습니다.

### 2) props 설명

state의 전달에서 가장 기본이 되는 방법은 부모(상위)컴포넌트에서 자식(하위) 컴포넌트로 값을 전달하는 경우입니다. 이럴 경우 사용 되는 기본 전달 방법인 바로 props입니다.

#### 예제 1

* &#x20;App.svelte

```
<script>
import Child from './child.svelte'
</script>

<SChildComp carryValue = { 12 } >

```

태그 형태의 컴포넌트에 `prop이름 = { 전달값 }` 이 형태로 값을 전달할 수 있습니다.

* Child.svelte

```
<script>
	export let carryValue
</script>

<p> 전달된 값은 { carryValue } 입니다. </p>
```

자식컴포넌트로 전달된 값은 `export let props이름` 이 형태로 받아서 사용 가능합니다.

정의된 state를 전달하는 방법도 있습니다. 가장 기본적으로 많이 쓰이는 방법입니다.

```
<script>
import Child from './child.svelte'

let carryValue = 12

</script>

<Child {carryValue} >

// Child.svelte
<script>
	export let carryValue
</script>

<p> 전달된 값은 { carryValue } 입니다. </p>

```

props는 또한 함수도 전달가능합니다.

```
// App.svelte
<script>
import Child from './components/child.svelte'

let value = 0

function handleValueAdd(event, param) {
	value = value + param
}

</script>

<p>value : {value}</p> 

<Child {handleValueAdd} />

// child.svelte
<script>

import SubChild from './subChild.svelte'

export let handleValueAdd

</script>

<SubChild {handleValueAdd} />

// subChild.svelte
<script>

export let value
export let handleValueAdd

</script>

<button on:click={(event) => handleValueAdd(event,10)} >Add 10</button>
<button on:click={(event) => handleValueAdd(event,20)} >Add 20</button>
```

#### 예제 - props

* App.svelte

```

<script>
import PanelComponent from './components/panelComponent.svelte'

let count = 10

function incrementCount() {
	// count = count + 1
	count ++

}

</script>

<PanelComponent {count} {incrementCount} />
```

* panelComponent.svelte

```
<script>
import ButtonComponent from './buttonComponent.svelte'

export let count
export let incrementCount
</script>

<div class="penal">
  <h1>{count}</h1>

  <ButtonComponent {incrementCount} />
</div>

<style>
  .penal {
    padding: 20px;
    display:flex;
    flex-direction: column;
    justify-items: center;
    justify-content: space-around;
    align-items: center;
    height: 500px;
    width:400px;
    background: #e2e2e2;
    border: 1px solid #777777;
  }
</style>
```

* buttonComponent.svelte

```
<script>
export let count
export let incrementCount
</script>

<button on:click={incrementCount} >
  increment count [{count}]
</button>
```



[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>

