데이터 바인딩(Data Binding)

데이터바인딩이란?

• 뷰와 모델에 있는 데이터를 동일하게 만들어주는 것을 의미합니다.
• 만약 js에서 데이터가 변경되어도 html에서 변경되지 않는다면 사용자는 잘못된 데이터를 보게 됩니다.
• 데이터 바인딩은 이러한 문제를 해결해줍니다.

Vanila Javascript

<div id="view">Hello</div>

const data = "song";
function changeText() {
  const view = document.querySelector("#view");
  view.innerText = data;
}

js에 있는 데이터를 화면상에 보여주기 위해서 아래의 과정들이 있습니다.

1. document 선택자로 DOM 요소에 접근합니다.
2. innerText로 텍스를 변경합니다.

위 코드는 간단하지만 프로젝트가 커질수록 데이터를 제어하기에는 무리가 있습니다.
Angular, Vue, React와 같은 프레임워크/라이브러리들을 사용하면 데이터 바인딩을 보다 깔끔하게 개발할 수 있습니다.

데이터 바인딩은 양방향과 단방향 크게 두가지로 나뉩니다.

양방향 데이터 바인딩

• 뷰와 모델의 데이터를 동기화하는 것입니다.
• 사용자의 입력값에 따라 js의 데이터가 변경되고, js의 데이터가 변경되면 사용자의 화면도 변경됩니다.

장점

• 코드의 양이 줄어든다.
• (데이터가 자동으로 변경되기때문)

단점

• 변화에 따라 DOM객체 전체를 렌더링하거나 데이터를 바꿔 성능이 감소되는 경우가 있다.

단방향 데이터 바인딩

• 한쪽 방향으로만 제어가 가능한것을 의미합니다.
• js에서는 사용자의 화면을 변경할 수 있지만, 사용자는 js에 있는 데이터를 자동적으로 변경시키지 못하기 때문에 변화된 값을 감지하여 데이터 바인딩을 시켜주어야 합니다.

장점

• 성능 저하 없이 DOM을 렌더링 시켜줍니다.

단점

• 변화된 값을 매번 감지하고 바인딩하기 떄문에 코드가 길어집니다.

import { useState } from "react";
const [inputValue, setInputValue] = useState("");
...
<input value={inputValue} onChange={e => setInputValue(e.target.value)} />

useState의 부분은 [get,set]이라고 생각하시면 됩니다.
inputValue는 변수를 활용할때 쓰이고, setInputValue는 inputValue의 값을 바꿀때 사용합니다.

• 코드의 흐름

  1. 초기값이 ""인 inputValue를 input의 value값으로 넣는다.
  2. 사용자가 값을 변경할때 onChange가 감지
  3. 변경된 값을 setInputValue로 inputValue의 값을 업데이트 시켜준다
  4. 변경된 값을 value를 통해 사용자에게 보여준다

사용자가 변수를 직접적으로 변경하는 것이 아닌 코드의 변경을 감지하여 변수의 값을 바꿔줍니다.