[Svelte]부모 컴포넌트의 값 변경

props 전달의 문제점

svelte에서 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는 방법 중 가장 대표적인 방법으로 props가 존재합니다. 다음 예제는 부모 컴포넌트인 App.svelte가 자식 컴포넌트인 Child.svelte에 cValue라는 이름의 props를 전달합니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import Child from './Child.svelte';
  let pValue = 1;
</script>

<div>
  <Child cValue={pValue} />
  <p>부모 컴포넌트의 pValue = {pValue}</p>
</div>

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

[자식 컴포넌트 - Child.svelte] 

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

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

[실행 결과]

실행 결과에서 확인할 수 있듯이 자식 컴포넌트에서 cValue라는 props의 값을 변경하면, 부모 컴포넌트에 영향이 없다는 것을 볼 수 있습니다.

---

bind로 props 전달

Svelte에서 자식 컴포넌트가 부모 컴포넌트의 값을 변경하고 싶은 경우 bind 지시자를 사용하여 props를 전달합니다. bind 지시자를 사용하여 props를 전달하는 경우 부모 컴포넌트의 변수와 자식 컴포넌트의 props가 바인딩되어 자식 컴포넌트에서 부모 컴포넌트의 값을 변경할 수 있습니다.

 

다음 예제는 자식 컴포넌트에서 Double이라는 버튼을 클릭하면 전달받은 props의 값과 부모 컴포넌트 script 영역에 선언된 변수의 값을 변경합니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import Child from './Child.svelte';
  let pValue = 1;
</script>

<div>
  <Child bind:cValue={pValue} />
  <p>부모 컴포넌트의 pValue = {pValue}</p>
</div>

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

[자식 컴포넌트 - Child.svelte]

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

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

[실행 결과]

---

bind 표현식 간소화

부모 컴포넌트의 변수 이름과 전달되는 props의 이름이 동일한 경우 bind 표현식을 간소화할 수 있습니다.

 

다음 소스 코드는 부모 컴포넌트의 변수 이름과 props의 이름이 다르므로 bind 표현식을 간소화할 수 없습니다.

<script>
  import Child from './Child.svelte';
  let pValue = 1;
</script>

<div>
  <Child bind:cValue={pValue} />
  <p>부모 컴포넌트의 pValue = {pValue}</p>
</div>

하지만, 다음 소스 코드는 부모 컴포넌트의 변수 이름과 props의 이름이 동일하므로 bind 표현식을 간소화할 수 있습니다.

<script>
  import Child from './Child.svelte';
  let cValue = 1;
</script>

<div>
  <Child bind:cValue />
  <p>부모 컴포넌트의 cValue = {cValue}</p>
</div>

---

정리

• 자식 컴포넌트가 부모 컴포넌트의 값을 변경하는 경우 bind 지시자를 사용하여 props를 전달합니다.
• 부모 컴포넌트의 변수 이름과 props의 이름이 동일한 경우 bind 표현식을 간소화할 수 있습니다.