🎯 Achievement Goals

데이터 바인딩이란? 단방향, 양방향 데이터 바인딩의 차이점

Intro.

토요일 오후 점심을 먹고 유튜브를 보다가 알고리즘 덕에 개발자 기술 면접 대표 질문이라는 제목을 보게 되었고, 고민도 없이 영상을 시청했다.

여기서 중간 쯔음에 단방향 양방향 바인딩에 대해서 꼭 물어본다는 말이 나오는데, 나도 어렴풋이 React를 공부하면서 들어본 적은 있지만 면접에서 명확하게 대답할 확신이 생기지 않았던 것이다.

면접 질문을 떠나서 프론트엔드 개발자가 기본적으로 알아야 하는 지식이라고 생각하여 이 부분은 확실히 공부해야 겠다는 생각이 들었다.

그래서 오늘 공부의 주제를 단방향 양방향 데이터 바인딩으로 잡고, 겸사겸사 면접 준비도 해볼 계획이다.

데이터 바인딩이란?

데이터가 단방향인지 양방향인지 알기 전에 데이터 바인딩의 뜻을 알아야 한다.

데이터 바인딩이란 두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 객체)를 일치시키는 것을 말한다.

React 같은 경우는 단방향 데이터 바인딩을 제공한다. 그리고 양방향 데이터 바인딩의 대표인 AngulaJS가 있고, Vue.js는 단방향, 양방향 데이터 바인딩 모두 제공한다.

그러면 이제 단방향, 양방향 데이터 바인딩의 차이점에 대해서 알아보자.

단방향 양방향 데이터 바인딩의 차이점

데이터 바인딩에 대한 개념 설명만 들었을 때는 확 와닿지 않는다. 하지만 두 데이터 바인딩의 차이점을 알면 조금 더 이해가 된다.

이 두 데이터 바인딩의 차이점은 HTML에서 변경된 내용이 데이터에 영향을 미치는데에 있다. 단방향 데이터 바인딩의 대표인 React로 먼저 예시를 들어보자.

React에서 사용자의 input 값을 받는 페이지가 있다. 여기서 사용자의 입력값이 데이터상에 즉각적으로 적용되지 않는다. 즉각적으로 적용하기 위해 우리는 이벤트를 추가하고, 이벤트를 통해 다시 화면에 데이터를 뿌려준다.

이름에 맞게 단방향인 만큼 JavaScript에서 HTML로 데이터 바인딩만 가능하다.

반면에, 양방향 데이터 바인딩의 대표인 AngulaJS는 엘리먼트에 데이터를 바인딩하면 Javascript 코드로 데이터를 변경이 가능하며, 엘리먼트의 값(input)을 수정해서 데이터를 변경할 수도 있다. 즉, 단방향 데이터 바인딩과 달리 이벤트 추가없이 바로 사용자가 입력한 값을 화면에 반영할 수 있다는 이야기이다.

그렇다면 어디서나 화면에 반영할 수 있는 양방향 데이터 바인딩이 훨씬 유리해보일 것이다. 그럼에도 왜 React 사용자가 더 많은 것일까?

일단 데이터 흐름이 부모에서 컴포넌트로 단방향인데, 이 구조가 코드를 이해하기 쉬우며 흐름 예측이 용이하다. 그리고 데이터를 JavaScript 코드에서만 관리를 할 수 있으므로 관리하기가 쉽다.

하지만 위에서 설명한바와 같이 이벤트 추가가 필요하며, 이 추가는 데이터 흐름을 감지하고 화면에 업데이트가 필요할 때마다 해야한다는 번거로움이 있다.

양방향 데이터 바인딩은 웹/앱 개발의 복잡도가 증가할수록 더 효율적이다. 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 Javascript 코드에서 관리도 가능하여 유지보수나 코드 관리 측면에서 유리하기 때문이다. 하지만 데이터 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔줘야 하므로 성능이 감소되는 단점이 있다.

마무리

단방향, 양방향 데이터 바인딩에 대해 알아보면서 React나 다른 JS 프레임워크들의 장단점까지 알 수 있었다. 현재 React를 중점으로 개발 공부를 하고 있지만, 다른 JS 프레임워크들의 장단점까지 명확하게 알고 있다면 왜 React를 써야하는지, React의 장점을 어떻게 살릴 수 있는지 분명하게 알 수 있겠다는 생각이 들었다.

현재는 다른 프레임워크까지 공부하기보다는 React와 각 프레임워크들의 장단점을 비교해가면서 React를 더 깊고 재밌게 공부하는데에 신경을 쓸 예정이다. 그리고 이들에게 가장 근본인 JavaScript의 깊이있는 공부는 당연히 빼먹을 수 없다!