Svelte에서 데이터 바인딩은 코드/데이터를 UI와 연결하는 중요한 방법이에요. 특히, 단방향 바인딩과 양방향 바인딩의 차이를 잘 이해하는 것이 중요하죠. 지금부터 예제 코드를 통해 이 두 가지 방식의 차이점을 알아볼게요 😊
데이터 바인딩이란? (Data Binding)
데이터 바인딩은 화면(UI)에 표시되는 데이터와 그 데이터를 관리하는 코드 간의 ‘연동’의 개념으로 생각하면 좋습니다.
[이부분 Q1~Q3는 Animotion Slide로 처리하면 좋지 않을까?]
Q1. 데이터 바인딩 이게 뭔데? UI에서 사용자가 입력한 값, 데이터를 코드로 가져와서 사용할 수 있게 만들어주는 것
Q2. 데이터 바인딩 왜 해야하는데? 사용자의 입력을 ‘코드’에서 처리하기 위해서 !
Q3. 데이터 바인딩 어떻게 하는데? bind 예약어를 사용하면 됩니다.
아래의 간단한 예시 코드를 볼까요? input 태그에 입력한 값을 <h1>태그의 값에 반영하는 코드입니다. 이 코드를 화면(UI)에 표시되는 데이터, 데이터를 관리하는 코드로 구분해보겠습니다
<script>
let hello = 'world';
</script>
<h1>{hello}</h1>
<input bind:value={hello}/>
데이터를 관리하는 코드
<script>
let hello = 'world';
</script>
화면(UI)에 표시되는 데이터
<h1>{hello}</h1>
<input bind:value={hello}
이렇게 구분된 코드 영역이지만, svelte에서 제공하는 bind를 통해 데이터 바인딩(Data Binding) – 데이터 연동이 가능해집니다.
단방향 바인딩 (One-way Binding)
단방향 바인딩은 데이터가 한 방향으로만 흐르는 방식을 말해요. 데이터에서 UI로 값이 전달되지만, UI에서 변경된 값이 데이터로 다시 전달되지는 않아요.
<script>
let hello = "world";
$:console.log(hello);
</script>
<input value={hello}/>
이 코드에서는 hello라는 변수에 "world"라는 값이 할당되어 있고, 이 값이 <input> 요소의 value 속성에 사용돼요. 하지만 input 필드에서 값을 변경하더라도, hello 변수에는 아무런 영향을 미치지 않아요.
예를 들어, 사용자가 input 필드에서 "world"를 "universe"로 바꾸더라도, hello 변수의 값은 여전히 "world"로 남아있어요. 따라서, UI는 데이터를 읽기만 할 수 있고, 반대로 데이터를 수정할 수는 없답니다.
양방향 바인딩 (Two-way Binding)
양방향 바인딩은 데이터와 UI가 서로 영향을 주고받을 수 있는 방식이에요. UI에서 변경된 값이 데이터에도 반영되고, 데이터의 변경이 다시 UI에 반영되는 형태죠.
<script>
let hello = "world";
$:console.log(hello);
</script>
<input bind:value={hello}/>
여기서는 bind:value={hello}를 사용했어요. 이 방식은 양방향 바인딩을 의미해요. input 필드에서 값을 변경하면, 그 값이 자동으로 hello 변수에 반영됩니다.
예를 들어, 사용자가 input 필드에서 "world"를 "universe"로 변경하면, hello 변수도 "universe"로 업데이트돼요. 이렇게 데이터와 UI가 항상 일치하도록 유지되기 때문에, 실시간으로 데이터를 확인하고 수정할 수 있어요.
Svelte와 React의 Data Binding 차이점
Svelte는 단방향, 양방향 바인딩을 쉽게 적용할 수 있습니다. bind 키워드 하나로 쉽게 Data binding을 결정할 수 있습니다. 하지만, React는 양방향 바인딩(Two-way Binding)을 사용하기 위해서는 Evenet Handling을 직접 개발자가 코드로 만들어줘야 한다는 차이점이 있습니다. 개인적으로 Svelte가초보 개발자들에게 더 직관적일 듯 합니다. 그냥 언어가 쉬운것일수도..? 있구요 ^^. React를 첫 웹 프레임워크로 선택했는데 대체 저 onChange의 존재 이유가 당최 이해가 안되었는데,, Data Binding 개념에 대한 이해가 필요했었군요.
https://component-party.dev/#form-input.input-text
결론
- 단방향 바인딩: <코드/데이터>가 UI로만 흘러가며, UI에서 변경된 값은 <코드/데이터>에 반영되지 않아요.
- 양방향 바인딩: <코드/데이터>와 UI가 상호작용하며, UI에서 변경된 값이 <코드/데이터>에 반영돼요.
이 두 가지 바인딩 방식을 잘 이해하고 활용하면, Svelte를 이용한 프로젝트에서 더 효율적으로 데이터를 관리할 수 있을 거예요! 😊
