[Study] 단방향 vs 양방향 데이터 바인딩

 

 

이전에 리액트 관련 글을 작성하면서 단방향 데이터 방식이라는 것을 보면서 데이터 바인딩에서도 공부하고, 두 방식을 비교해두면 좋을 것 같았다.

 

 

1. 데이터 바인딩 (Data Binding)

---

데이터 바인딩은 화면상에 보여지는 데이터(View) / 브라우저에 있는 메모리(Model)에 있는 데이터를 묶어서 서로 데이터를 동기하는 것을 의미한다. 요약하면, 두 데이터를 일치시키는 기법이다.

 

 

2. 단방향 데이터 바인딩

---

먼저 이미지를 확인해보면 더 쉽게 이해가 가능하다.

💡 컴포넌트 내에서는 Model(Javascript)에서 View(HTML)로 한 방향으로 데이터를 동기화

=> 역으로 HTML에서 Javascript로의 직접적인 데이터 갱신은 불가능하고, 이벤트 함수를 호출해 Javascript에서 HTML로 데이터를 변경해야 한다.

 

💡 컴포넌트 간의 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달

 

대표적으로 React에서 단방향 데이터 바인딩을 한다.

 

💡 장점

- 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능

- 흐름이 단방향이기 때문에 코드를 이해하기 쉽고, 데이터 추적과 디버깅이 쉬움

 

💡 단점 : 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 하므로 코드의 양이 많아짐

 

 

3. 양방향 데이터 바인딩

---

💡 컴포넌트 내에서는 Model(Javascript)와 View(HTML) 사이에 ViewModel이 존재하여 하나로 묶여 둘 중 하나만 변경되어도 함께 변경되는 것

 

💡 컴포넌트 간의 바인딩은 부모 컴포넌트에서 자식 컴포넌트로는 Props를 통해 데이터를 전달하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해 데이터를 전달하는하는 것

 

대표적으로 Vue.js, Angular에서 양방향 데이터 바인딩을 한다.

 

💡 장점 : 코드량이 크게 감소해 유지보수나 코드 관리면에서 쉬워 어플리케이션 복잡도가 증가할수록 장점이 부각

 

💡 단점 : 변화에 따라 DOM 객체 전체를 렌더링해주거 데이터를 바꿔주므로, 성능이 감소되는 경우가 있음

 

 

4. 후기

---

리액트를 공부하고 사용하면서 단방향 데이터 바인딩이 주는 장단점에 대해서 알 수 있었고, 리액트에서 컴포넌트 내부 또는 컴포넌트 간의 데이터 흐름에 대해 조금 더 이해할 수 있었다.

 

 

참고 : https://adjh54.tistory.com/49

[JS] 데이터 바인딩 이해하기(단방향, 양방향 데이터 바인딩)