[Svelte]콘텍스트를 사용하여 데이터 전달

콘텍스트(Context)의 필요성

콘텍스트를 소개하기 전에 props를 사용하여 데이터를 전달하는 방법의 문제점을 알아봅시다.

 

부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달하는 경우 props를 사용하는 것이 가장 좋으나 컴포넌트 구조가 복잡한 경우 데이터 전달이 어렵습니다.

 

예를 들어, 컴포넌트 구조가 App > B > C로 구성되어 있다고 가정하고 props를 사용하여 App 컴포넌트의 데이터를 C 컴포넌트에게 전달하는 경우 B 컴포넌트를 거쳐야 한다는 단점이 있습니다.

 

[최상위 컴포넌트 - App.svelte]

<script>
  import B from './B.svelte';
  let numValue = 1;
</script>

<div>
  <B numValue={numValue} />
</div>

<style>
div {
  text-align: center;
}
</style>

[중간 컴포넌트 - B.svelte]

<script>
  import C from "./C.svelte";
  export let numValue;
</script>

<C numValue={numValue} />

[최하위 컴포넌트 - C.svelte]

<script>
  export let numValue;
  const double = () => (numValue *= 2);
</script>

<button on:click={double}>Double</button>
<div>자식 컴포넌트의 numValue = {numValue}</div>

위 예시처럼 최상위 컴포넌트에서 최하위 컴포넌트에게 데이터를 전달해야 하는 경우 중간에 있는 컴포넌트가 의도치 않게 props를 사용해야 한다는 문제가 있습니다.

---

콘텍스트(Context)

위 문제는 콘텍스트를 사용하면 쉽게 해결할 수 있습니다. 최상위 컴포넌트에서 전달하고자 하는 데이터를 콘텍스트 영역에 추가하고 후손 컴포넌트가 콘텍스트 영역의 데이터를 접근합니다. 따라서, 중간 컴포넌트에서 props를 전달하는 코드를 구현하지 않아도 됩니다.

 

콘텍스트에 데이터를 추가하거나 데이터를 가져오기 위해서는 아래 두 함수를 사용합니다.

 

setContext()

- 콘텍스트에 데이터를 추가하는 함수입니다.

- 키-값 쌍으로 데이터를 추가합니다.

 

getContext()

- 콘텍스트에서 데이터를 가져오는 함수입니다.

- 키를 매개변수로 전달하여 데이터를 가져옵니다.

---

콘텍스트 API 사용 방법

다음 예제는 props를 사용하여 App 컴포넌트에서 C 컴포넌트에게 데이터를 전달하는 과정을 콘텍스트로 변경합니다.

 

[최상위 컴포넌트 - App.svelte]

<script>
  import {setContext} from 'svelte';
  import B from './B.svelte';

  setContext('numValue', 1);
</script>

<div>
  <B />
</div>

<style>
div {
  text-align: center;
}
</style>

최상위 컴포넌트인 App.svelte는 콘텍스트에 데이터를 추가해야 하므로 svelte의 setContext() 함수를 가져와서 호출합니다. setContext() 함수는 특정 조건에 의해 호출되거나 나중에 호출되어서는 안 되고 컴포넌트로 인스턴스를 만들 때 호출되어야 합니다.

 

키-값 쌍으로 키를 'numValue'로 설정하고 값을 1로 설정합니다.

 

[중간 컴포넌트 - B.svelte]

<script>
  import C from "./C.svelte";
</script>

<C />

중간 컴포넌트인 B.svelte는 props로 전달하는 코드를 제거합니다.

 

[최하위 컴포넌트 - C.svelte]

<script>
  import {getContext} from 'svelte';
  let numValue = getContext('numValue');
  const double = () => (numValue *= 2);
</script>

<button on:click={double}>Double</button>
<div>자식 컴포넌트의 numValue = {numValue}</div>

최하위 컴포넌트인 C.svelte는 콘텍스트에 등록된 데이터를 가져와야하므로 svelte의 getContext() 함수를 가져와서 호출합니다. getContext() 함수의 매개변수로 콘텍스트에 등록된 데이터의 키를 전달합니다. setContext() 함수와 마찬가지로 특정 조건에 의해 호출되거나 나중에 호출되어서는 안 됩니다.