양방향 바인딩

데이터 바인딩이란?

뷰와 모델에 있는 데이터를 동일하게 만들어주는 것을 의미한다.

js에서 데이터 변경을 할 경우 html에서도 변경

 

 

 

양방향 바인딩과 단방향 바인딩

양방향 바인딩과 단방향 바인딩

 

 

양방향 데이터 바인딩

---

양방향 데이터 바인딩이란 뷰와 모델의 데이터를 동기화하는 것입니다.

즉 사용자의 입력값에 따라 js의 데이터가 변경되고,

js의 데이터가 변경되면 사용자의 화면도 변경됩니다.

 

장점

* 코드의 양이 줄어듭니다.

데이터가 자동으로 변경되기 때문입니다. 

 

단점

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

 

 

단방향 데이터 바인딩

---

단방향 데이터 바인딩이란 한쪽 방향으로만 제어가 가능한 것을 의미합니다.

js에서는 사용자의 화면을 변경할 수 있지만,

사용자는 js에 있는 데이터를 자동적으로 변경시키지 못하기 때문에

변화된 값을 감지하여 데이터 바인딩을 시켜주어야 합니다.

 

 

장점

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

 

단점

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

 

단방향은 React를 예시로 추가 설명하겠습니다.

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

 

react를 모르시는 분들을 위하여 useState를 살짝 설명드리면 앞에 나오는 부분을 [get, set]이라고 생각하시면 됩니다.

inputValue는 변수를 활용할 때 쓰이고 setInputValue는 inputValue의 값을 바꿀 때 사용합니다.

 

위 코드의 흐름은 이렇습니다.

1. 초기값이 ""인 inputValue를 input의 value값으로 넣습니다.

 

2. 사용자가 값을 변경할 때 onChange가 감지합니다.

 

3. 변경된 값을 setInputValue로 inputValue의 값을 업데이트 시켜줍니다.

 

4. 변경된 값을 value를 통해 사용자에게 보여줍니다.

 

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

 

 

<출처>양방향/단방향 데이터 바인딩 (tistory.com)