단방향 데이터 바인딩

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

해당 글에서는 '데이터 바인딩'에 대해서 이해를 하고, 더 나아가서 '단방향/양방향 데이터 바인딩'에 대해 이해하기 위한 글입니다. 1) 데이터 바인딩(Data Binding)이란? 💡 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미합니다. 💡 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다. [ 간단한 예제 - 1 ] 값을 데이터 바인딩한다. 💡 아래의 예제는 함수형 컴포넌트 안에서 ‘initData’로 초기화 한 값..