바인딩은 뭐 설명할 필요도 없이 쉽습니다.

<script></script> 태그 안에서 변수 선언하고

html 에서 {} 감싸서 표현하고

input 테그 안에서 bind:vaule={} 이렇게하면, 글쓰는 족족히 실시간으로 변수 값이 바인딩 연결됩니다.

양방양도 가능합니다.

 

그럼 다음으로 사용해야할 기술은 바로

페이지와 컴포넌트 간의 변수의 공유 전달 그리고 함수 호출 입니다.

 

페이제어서 페이지로 값을 넘길때는

url 호출할때 get 값을 넘기듯이 할 수 있습니다.

아 이거 설명할려고한건 아닌데, 폴더 구조 설명할때 했었어야한거네요. 암튼

/src/routes/board/[bo_table]/view/[wr_id]

이렇게 폴더 이름을 설정해 놓으면 [] 로 감싼 폴더명의 특정한 이름이 호출되면 해당 호출 명이 해달 폴더명의 값으로 할당됩니다. 

그러니가 위 주소처럼 폴더명을 만들어서 단계별로 폴더를 만들어 놓고

실제 url 호출을 localhost:5173/board/free/view/3

요렇게 호출을 하면,

bo_table = free 가 할당되고

wr_id = 3이 할당되어서

/src/routes/board/[bo_table]/view/[wr_id]/+page.svelte

파일에서 $page.params.bo_table , $page.params.wr_id로 값을 불러와서 활용할 수 있습니다.

이게 get방식으로 페이지에서 페이지로 값을 넘기는 방식입니다.

post 넘기는 방식도 있는데, 저는 이방식을 자주 사용하지는 않습니다.

그건 나중에 공부해서 알려드리겠습니다.

 

그리고 앞서 store 로 공유하는 방식이 있고. store는 값을 공유한다고 생각하시면 됩니다

 

그리고 컴포넌트로 값을 넘기고 받는 방식이 있습니다.

부모페이지에서 자식컴포넌트로 값 전달

컴포넌트는 부모돠 자식으로나 나뉠 수 있는데요.

컴포넌트를 호출하는 페이지가 부모이고 호출되어 지는 컴포넌트가 자식컴포넌트라 할 수 있습니다.

컴포넌트는 호출시 대문자로 시작합니다.

import Alert from '$lib/component/modal/Alert.svelte';

let active_on =false;

이렇게 가져와서 아래와 같이 호출을하고 

<Alert active={active_no} />

이때 active 요소는  lib/component/modal/Alert.svelte 에 미리 정의 되어 있는 변수가 되는데

export let active = false;

호출시 요소의 값으로 부모 페이지에서 값을 넣어서 요청할 수 있습니다. 이것도 양방향 바인딩이 가능해서

앞에 bind: 만 붙여주면 양방향 호출이 가능하게 됩니다.

<Alert bind:active={active_no} /> 

 

부모페이지에서 자식 함수 호출

  <Alert bind:this={alertObject} />

이렇게 해놓으면, 해당테그가 this로 지정되어 alertObject에 동기화 된다.

그러면 객체의 하부의 함수를 호출하듯이

alertObject.runfunction(); 이렇게 호출해도 호출이 먹힌다.

 

자식페이지에서 부모페이지에 값 전달

- 앞서 bind: 를 걸어 놓으면 부모와 지삭 양방향에서 모두 값을 전달 할 수 있다.

자식 페이지에서 부모 페이지 함수 호출

디스페치를 이용하면됩니다. 좀 길것 같아서 gptchat 에 물어본 결과 입니다.

 

<!-- ChildComponent.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function childFunction() {
    dispatch('customEvent', { data: 'Hello from the child component' });
  }
</script>

<button on:click={childFunction}>Call Parent Function</button>

 

위 코드에서 createEventDispatcher() 메소드를 호출하여 dispatch 변수에 이벤트 디스패처를 할당합니다. 그리고 childFunction() 함수에서 dispatch() 메소드를 사용하여 customEvent라는 이벤트를 발생시키고, { data: 'Hello from the child component' } 객체를 함께 전달합니다.

 

 

<!-- ParentComponent.svelte -->
<script>
  function parentFunction(event) {
    console.log(event.detail.data);
  }
</script>

<ChildComponent on:customEvent={parentFunction} />
 

위 코드에서 부모 컴포넌트에서 ChildComponent를 사용하면서 on:customEvent 디렉티브를 추가합니다. customEvent 이벤트가 발생하면 parentFunction() 함수가 호출되며, event.detail 속성을 사용하여 자식 컴포넌트에서 전달한 데이터를 가져올 수 있습니다.

이렇게 하면 자식 컴포넌트에서 부모 컴포넌트의 함수를 호출할 수 있습니다. 이 방법을 사용하면 부모 컴포넌트의 상태나 프로퍼티를 변경하는 것도 가능합니다. 이 경우 bind 디렉티브를 사용하여 자식 컴포넌트의 프로퍼티와 부모 컴포넌트의 상태를 바인딩할 수 있습니다.