🔔 Goal
- 데이터 바인딩에 대해 이해하기
데이터 바인딩
데이터 바인딩이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.
말은 알겠는데... 정말 말만 알겠다..
🌳 간단하게 이해해보자
🍃 양방향 데이터 바인딩
그림과 같이 데이터 변화가 있을 때마다 저 watcher들은 데이터의 변화를 감지하고 템플릿과 결합하여 화면을 갱신한다. (HTML <-> JS)
조금 더 상세히 말하면, 데이터의 변경을 프레임워크에서 감시하고 있다가 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 데이터를 변경한다. 따라서 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 핸들링해주지 않아도 된다.
Angular.js나 Vue.js가 보통 위의 방식을 사용한다.
vue로 작성한 양방향 데이터 바인딩 예시 코드
...
<div id = "app">
<form>
<input type="text", v-model="text>
<p>{{ text }}</p>
<button type="submit">제출</button>
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
text: ''
},
methods: {
//
},
})
</script>
...🍃 단방향 데이터 바인딩
그림과 같이 데이터 변화가 있을 때마다 직접 이벤트 핸들링을 통해서 script로 템플릿과 결합하여 화면을 갱신한다. (HTML <- JS)
React.js가 보통 위의 방식을 사용한다.
react로 작성한 단방향 데이터 바인딩 예시 코드
state = {
name: ''
}
handleChange = (e) => {
this.setState({
name: e.target.value
})
}
render() {
return (
<form>
<input
placeholder="이름"
value={this.state.name}
onChange={this.handleChange}
/>
<div>{this.state.name}</div>
</form>
);
}🌳 생각 정리
개발하는 측면에서는 양방향이 좋은 것이 아닌가라는 생각이 들 수 있다. 맞다. 양방향 데이터 바인딩은 굉장히 이점이 많다. 하지만 많은 수의 뷰를 구성하게 될 때 양방향 데이터 바인딩을 이용하면 그와 연결된 수많은 모델들을 하나하나 dirty check해야하고 성능 저하에 직접적인 영향을 끼칠 수 있다.
이를 해결할 수 있는 최적화 방안들이 여러 있지만 제대로 사용하지 않는다면 성능 문제가 반드시 따를 것이다.
즉, 쓸 수 있다면 꼭 필요한 부분에 쓰자.
🌳 Reference
