데이터 바인딩에 대해서 알아보자

안녕하세요, 오늘의 블로그 포스팅 주제는 데이터 바인딩입니다. 양방향 바인딩과 단방향 바인딩 한 번은 들어보셨을 것 같은데, 정확히 어떤 개념인지 잘 모르시는 분들도 많고 내가 쓰는 프레임워크가 과연 양방향일지 아니면 단방향인지도 모르시는 분들을 위해서 오늘의 블로그를 준비했습니다.

 

 

데이터 바인딩 (Data Binding)

데이터 바인딩은 화면상에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서 바인딩이라고 불리는데, 이러한 바인딩이 서로 간의 데이터를 동기화시키는 것을 데이터 바인딩이라고 합니다.

 

조금만 더 자세하게 설명을 하자면, HTML에서 서버 or script에서 받아온 데이터를 View에 보여주고 있다가 어떠한 데이터가 변경이 되면 다시 HTML상에 데이터를 변경된 값에 따라서 맞춰주는 동작입니다.

 

⭐️ HTML에서 변경된 내용이 데이터에 영향을 미치는 가에 대한 차이 ➡️ 양/단방향 

 

 

Binding에 개념 설명에 앞서서 ..

View (뷰) : 사용자가 보는 화면(UI) 부분을 가리킨다. 또 웹 애플리케이션에서 사용자가 상호 작용을 하는 부분을 의미하며, 화면에 표시되는 모든 요소와 컴포넌트이다.

Model (모델) : 애플리케이션의 데이터와 비즈니스 로직을 다루는 부분으로 데이터의 형식, 구조, 상태 등을 정의하고 관리하며, 데이터를 모델로부터 읽어오거나 모델을 업데이트하여 적용한다.

 

양방향 데이터 바인딩(Two-way Data Binding)

양방향 데이터 바인딩은 부모 컴포넌트와 자식 컴포넌트 간에 데이터가 양쪽에서 즉, 서로 양방향으로 흐른다.

 

부모와 자식 모두 데이터를 "직접" 변경이 가능하다는 점이다.

 

model과 view가 있을 때, 양방향 데이터 바인딩은 model이 업데이터가 되면 view가 업데이터가 되고, 반대로 view가 업데이트가 되면 model이 업데이트가 된다는 점이다. 이는 자동 동기화라고 부르기도 한다.

 

 

양방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해서 전달을 하고, 자식 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조입니다.

 

 

단방향 데이터 바인딩(One-way Data Binding)

기본적으로 단방향 데이터 바인딩은 양방향 데이터 바인딩과 다르게 한 방향에서만 데이터가 흐릅니다.

 

전반적인 구조는 이벤트 함수가 일어나면 Model인 자바스크립트가 변경이 되고 이것을 토대로 HTML인 View에 실질적으로 추가를 하여서 변경하는 형태가 되는 것이죠.

 

단방향 데이터 바인딩은 반대로 HTMl(View)에서 JavaScript(Model)로는 직접적인 데이터 갱식은 불가능합니다.

⭐️ 이벤트 핸들러는 통한 함수를 호출 후에 JavaScript에서 HTML로 데이터를 변경한다는 사실!!

 

컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조이다.

 

"그러면 자식 컴포넌트에서 부모 컴포넌트로는 데이터를 못 보내는 거야?"

물론 할 수는 있죠.

Lifting State Up 더 찾아보시면 좋을 것 같습니다!!

 

양/단방향 데이터 바인딩에 어떤 프레임가 있을까?

양방향	단방향
Vue, Angular	React

 

각각의 데이터 바인딩은 어떤 장단점을 가지고 있을까?

	양방향	단방향
단점	성능, 디버깅 문제가 발생	코드의 양 ⬆️
장점	코드의 양 ⬇️ (데이터를 감지하여 자동으로 동기화)	성능 최적화, 예측(코드 파악)성이 뚜렷

 

마무리

아직 다른 프레임워크를 겪어보지 못해서 양방향 데이터 바인딩을 잘 느끼지 못한 것 같아서 Vue를 한 번 만져볼까 생각하고 있습니다. Emit Event를 조금 자세히 알아봐야 이해가 될 것 같습니다.