데이터 바인딩이란?

구조화 된 웹 애플리케이션을 구축하기 위해서 뷰와 모델의 분리가 필수 적인데 분리되었지만 유기적으로 작동해야하기 위해서 데이터 바인딩을 하는것이다.

즉 화면에 값과 코드 상의 값이 일치하는 게 데이터 바인딩이다.

양방향 데이터 바인딩

데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면입력에 따라 데이터를 갱신하는 것이다.
HTML -> JS , JS -> HTML

양방향 장단점

장점: 코드 사용면에서 코드량을 크게 줄여줍니다.

단점: 변화에 따라 DOM 객체 전체를 렌더링하거나 데이터를 변경 하므로 성능감소되는 경우가 있다.

단방향 데이터 바인딩

JS -> HTML로 한 방향으로만 데이터 바인딩을 해주는 것이고 데이터의 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야한다.

단방향 장단점

장점: 데이터의 변화에 따른 성능 저하 없이 DOM객체 갱신이 가능하다.
데이터가 한 방향으로 흐르기때문에 코드 이해와 데이터 추적, 디버깅이 쉽다.

단점: 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다.

내가 배운 점

현재 나는 React만 배웠기 때문에 단방향 데이터 바인딩에 단점인 화면을 업데이트하는 코드를 매번 작성해야한다는 점이 불편하다는 걸 몰랐었다.
내가 생각하는 단점은 데이터가 부모 -> 자식으로만 흐르기 때문에 데이터 관리가 힘들고 props지옥에 빠질 수 있다는 것인데 이것은 redux를 통해 해결할 수 있으니 다행이라 생각한다.

장점에 대해서는 프로젝트가 규모가 커질수록 유지보수시 코드이해하는 능력이 필요하다 생각하는데 단방향으로 짜면 흐름이 이해가 쉬워져서 React를 단방향으로 설계하고 많은 회사들이 사용하지 않았을까 생각한다.

양방향 데이터 바인딩은 아직 와닿지는 않는것 같다.
내 생각엔 코딩하기엔 진짜 재밌고 빠를것 같다.
나중에 Angular 나 Vue를 공부를 해보면 직접 장단점을 느끼지 않을까 생각이 든다 Angular나 Vue를 공부해야할 때 포스트를 수정해야겠다.