컴포넌트 통신방법 3 : context API

context를 이용한 전달

prop를 다른 하위 컴포넌트로 값을 전달 가능하지만, 이 방법이 효율적이지 않을 때가 있습니다.

대표적인 예가 구성요소의 컴포넌트가 바로 하위가 아닌 좀 더 깊은 구조의 컴포넌트에 값을 전달할 경우인 때입니다. 이럴때 사용가능한 기능이 바로 context API입니다.

• 구성 트리리 이미지 참조

svelte에서는 getContext로 값을 담고, setCntext로 값을 받아 올 수 잇습니다. 이 기능이 좋은 점은 값을 전달하기 위해 계속해서 컴포넌트로 prop를 전달할 필요가 없다는 것입니다.

• setContext - 전달

<script>
import {setContext} from 'svelte'

const setValues = {
	a: 1,
	b: 2
}

setContext('setKey', setValue)

...

• getContext - 받기

<script>
import { getContext } from 'svelte'

const getValue = getContext('setKey')

</script>

a: { getValue.a }
b: { getValue.b } 

예제 context API

• app.svelte

<script>
import { setContext } from 'svelte'

import PanelComponent from './components/panelComponent.svelte'

let count = 10

function incrementCount(event) {
	count ++
}

setContext('incrementCount', incrementCount)
setContext('count', count)

</script>

<PanelComponent {count} />

• panelComponent.svelte

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

export let count
</script>

<div class="penal">
  <h1>{count}</h1>
  
  <ButtonComponent {count}  />
  
</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>
import { getContext } from 'svelte'
// export let count

let handleIncrementCount = getContext('incrementCount')
let count = getContext('count')
</script>

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

[만들면서 배우는 Svelte]

만들면서 배우는 svelte