[React/리액트] 데이터 바인딩(Data Binding)과 양방향, 단방향 바인딩 이해하기

1. 데이터 바인딩(Data Binding)

 : 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를

   동기화하는 것을 의미한다.

   MVC 모델에서 model과 view가 묶여져 자동 동기화시키는 것을 의미하기도 한다.

 

   이러한 데이터 바인딩에는 양방향 바인딩과 단방향 바인딩이 있다.

 

2. 양방향 바인딩

[1] 설명

 : 양방향 데이터 바인딩에서는 부모 컴포넌트와 자식 컴포넌트 간의 데이터가 서로 양방향으로 흐르기 때문에

   부모와 자식 모두 데이터를 직접 변경할 수 있다.

 

 : Model(JavaScript)와 View(HTML)가 있을 때,

    Model의 데이터가 업데이트 될 경우  ->  view도 업데이트

    view의 데이터가 업데이트 될 경우  ->  Model도 업데이트

    이렇게,  Model과 View 양쪽이 모두 데이터 일치가 가능하게 해주는 것을 양방향 데이터 바인딩이라고 한다.

[2] 특징

• 데이터 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 변경한다. 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 체크할 필요가 없다
• 즉, 데이터 변화를 감지해 템플릿과 back과 front 양쪽에서 어느 한쪽이 데이터 변화가 일어날 경우, 다른 한쪽에서 동기화한다.
• 웹 앱의 코드가 길어지고 복잡해질수록 빛을 발휘한다. 코드의 양을 줄여줄 뿐만 아니라 유지보수나 코드를 관리하기에 매우 유용하다
• 양방향 데이터 바인딩의 프레임워크로는 Vue, Angular가 있다

[3] 장점

• 코드 작성량을 크게 줄여준다

[4] 단점

• 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다

 

 

3. 단방향 바인딩

[1] 설명

 : 데이터와 템플릿을 결합해 화면을 생성하는 것이다. ( Model(JavaScript) -> View(HTML) 만 가능하다 )

   사용자의 입력에 따라 데이터를 갱신하고 화면을 업데이트해야 하므로 단방향 데이터 바인딩을 구성하면

   데이터의 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해주어야 한다.

 

 : React가 단방향 데이터 바인딩을 하고 있는 라이브러리이고,

   부모 컴포넌트에서 자식컴포넌트로의 단방향(하향식) 데이터 흐름이 일어난다.  때문에 데이터 흐름이 명확하고, 예측이 가능하다.

[2] 특징

• 대표적인 라이브러리인 React가 단방향 데이터 바인딩을 한다
• React는 자바스크립트 기반으로, 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 전달한다
• JavaScript -> HTML 으로 데이터 흐름이 나타난다
• 리액트가 양방향 바인딩을 지원하지 않지만, 부모 컴포넌트에서 전달한 핸들러를 통해 state를 바꾸는 등의 양방향 바인딩같은 동작이 일어나도록 할 수 있다.

[3] 장점

• 데이터 변화에 따른 성능저하 없이 DOM 객체 갱신이 가능하다
• 데이터 흐름이 단방향이기 때문에 데이터의 추적과 디버깅이 용이하다

[4] 단점

• 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다