작성한 질문수 53

5

Jon 님 안녕하세요~
좋은 질문 주셨네요!
혹시 내용 읽어보시고 이해가 되지 않으시면 다시 질문 남겨주세요.

우선 해당 예제에서,
todos라는 배열은 App.svelte 컴포넌트에서 {#each} 블록과 함께 '출력'했습니다.
즉 todos가 출력되는 곳은 App.svelte 컴포넌트입니다.
그리고 그렇게 반복되는 데이터를 todo라는 이름으로 Todo.svelte 컴포넌트에 Props로 전달하고 있죠.
그리고 그 전달된(받은) todo라는 객체는 반복되는 각 Todo.svelte 컴포넌트 안에서 '출력'했습니다.

이때 Todo.svelte 컴포넌트의 updateTodo 함수에서 todo.title = title 코드를 실행하면 화면이 잘 바뀌는(반응성을 가지는) 이유는, 그 코드가 있는 Todo.svelte 컴포넌트에서 그 해당 todo 객체를 출력하고 있기 때문입니다.
즉, 하나의 컴포넌트 안에서 갱신 코드와 출력 코드가 동시에 존재하는 거죠.

그런데 반대로, Todo.svelte 컴포넌트의 deleteTodo 함수에서 todos = todos.filter(t => t.id !== todo.id) 코드를 실행하면 데이터 자체는 갱신되지만, 화면이 바뀌지(반응성을 가지지) 않죠.
그것은 그 코드가 있는 Todo.svelte 컴포넌트에서 todos 배열을 출력하는 것이 아니고 App.svelte 컴포넌트에서 todos 배열을 {#each} 블록으로 출력하고 있기 때문입니다.
즉, App.svelte 컴포넌트의 <Todo {todos} /> 코드와 같이 단방향 데이터 바인딩으로는 Todo.svelte 하위 컴포넌트가 App.svelte 상위 컴포넌트의 데이터를 수정해도 반응성을 제공할 수 없다는 것인데요.

그래서 결국 실제 강의 영상처럼 Store를 사용하거나, 영상 자막에 남긴 것처럼 <Todo bind:todos /> 코드로 수정해서 양방향 데이터 바인딩을 제공하면, Todo.svelte 하위 컴포넌트에서 수정한 todos 배열이 App.svelte 상위 컴포넌트에서 반응성을 가지게 만들 수가 있는 겁니다.

정리하면, 특정 Svelte 컴포넌트 외부에서 출력되는 데이터의 반응성은 단방향 데이터 바인딩으론 관여할 수 없다는 겁니다.

추가로, 단순한 컴포넌트 구조에선 양방향 데이터 바인딩이 더 구현하기 쉽지만, 더 복잡한 다중 컴포넌트 구조를 고려하면 Store 사용이 권장됩니다.