단방향 양방향 데이터 바인딩, 알기 쉽게 요약!

1) 데이터 바인딩?

화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것

MVC 모델을 예로 들면 Model과 View를 서로 묶어 Model 과 View 의 각 데이터를 서로 자동으로 동기화 시킨다고 보면 된다.

1-1. 그래서 바인딩이 뭐죠?

다음과 같이 변수 하나를 만들어보자.

const number = 2;

위 코드에서 const 는 자료형, number 는 이름, 2 는 자료값에 해당한다.

위와 같이 이름, 자료형, 자료값에 각각 const, number, 2 라는 구체적인 값을 할당하는 각각의 과정을 바인딩이라고 한다.

2) 양방향 데이터 바인딩

백엔드의 서버와 프론트의 뷰 양쪽의 데이터 일치가 모두 가능한 것 (JS => HTML, HTML => JS)

한마디로 "데이터의 변화를 실시간으로 업데이트 한다." 고 이해하면 된다.

• 장점
  • 코드의 사용면에서 코드량을 크게 줄여준다.
• 단점
  • 변화에 따라 DOM 객체 전체를 랜더링 해주거나 데이터를 바꾸므로 성능이 감소할 우려가 있다.

3) 단방향 데이터 바인딩

데이터와 템플릿을 결합해 화면을 생성하는 것 (JS => HTML 만 가능)

한마디로 "특정 이벤트가 일어나기 전까지 데이터의 변화가 일어나지 않는다" 고 이해하면 된다.

• 장점
  • 데이터의 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능하다.
• 단점
  • 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다.