단방향, 양방향 데이터 바인딩

공부를 하다보니 바인딩이라는 단어를 꽤나 자주 접했다.

과연 바인딩이 무엇일까??

바인딩

식별자와 값을 연결하는 과정을 의미한다.

예를 들어서, ‘변수 선언’은 변수의 이름과 확보된 메모리 공간의 주소를 ‘바인딩’하는 것이다.

단방향, 양방향 바인딩

그렇다면 단방향, 양방향 바인딩은 무엇일까?

우선, 지금껏 내가 공부해온 React가 단방향 데이터 흐름(부모 컴포넌트→자식 컴포넌트)

을 갖는 단방향 데이터 바인딩을 한다.

그리고, 배워보지 못한 Angular가 양방향 데이터 바인딩을 한다.

쉽게, ‘HTML에서 변경된 내용이 데이터에 영향을 미치는가’를 생각하면 된다.

단방향 데이터 바인딩

→ 리액트는, JavaScript에서 HTML로의 데이터 바인딩(단방향)만 가능하다. 즉, HTML에 바인딩한 데이터를 수정하면, 화면상에는 반영이 되지만

JavaScript의 데이터 내용은 바꿀 수 없다.

때문에, JavaScript 코드가 데이터에 집중되어 일관된 데이터 관리 로직을 갖는 장점이 있다.

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

양방향 데이터 바인딩

→ 앵귤러는, HTML에 바인딩한 데이터를 JavaScript 코드로 변경할 수도 있고, 그 값을 수정해서 JavaScript의 데이터 내용도 변경할 수 있다.

양방향 데이터 바인딩은 코드량을 크게 줄여주기 때문에 서비스의 복잡도가 증가하거나

규모가 커질수록 유지보수와 코드 관리가 쉽다는 장점이 있지만,

변화에 따라서 DOM 객체 전체를 렌더링 또는 데이터를 바꿔주므로 성능적으로

떨어지는 경우가 생기는 단점이 있다.