[React] 2 way data binding (양방향 바인딩)

2 way data binding (양방향 바인딩)

Data binding : 객체와 데이터를 일치시키는 것

두 데이터 혹은 정보의 소스를 모두 일치시키는 기법. 즉 화면에 보이는 객체와 브라우저 메모리에 있는 데이터를 일치시킨다.

 

JSX Data binding 자바스크립트 데이터를 HTML에 넣어주는 것. Js 데이터를 HTML 데이터와 같도록 해주는 것.

function App() {

  var data = 'Hello World!';

  return (
    <div>
    <p>{ data }</p>
    </div>
  )

}

//결과 <p>Hello World!</p>

리액트는 이렇게 중괄호 안에 데이터 바인딩하고 싶은 함수를 적는다.

 

양방향 바인딩(2-way data binding)의 경우, 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만(Angular / Vue.js)

단방향 바인딩(one way data binding)의 경우 적절한 Event를 통해서만 코드 상 변수에 데이터 값이 담긴다.(React)

2 way data binding (양방향 바인딩)

back과 front의 Vue 양쪽 방향으로 데이터 일치가 가능한 것. HTML ↔ Js 양쪽으로 데이터 갱신 가능

• 장점 : 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와줌, 코드량 크게 줄일 수 있음
• 단점 : 변화에 따라 DOM 객체 전체를 랜더링 해주거나 데이터를 바꿔주므로 성능이 감소되는 경우가 있음

2 way data binding (양방향 바인딩) 리렌더링 흐름

1. 부모 component A는 props를 통해 자식에게 데이터를 전달한다.

2. 자식 component B는 events를 통해 부모에게 메시지를 보낸다.

3. component watcher라는 것이 데이터 수정이 발생하면 다시 렌더링이 된다.

4. 부모와 자식 component는 watcher라는 매개체를 통해 지속적으로 데이터를 일치시킨다.

양방향바인딩의 경우 Model과 View의 데이터가 템플릿 아래서 서로 계속 업데이트 된다. 이 경우 View에서 사용자가 특정 데이터를 변경시키면 JS에서의 데이터도 변경이 되고, 반대로 JS에서 어떤 값을 수정하면 그 값이 바인딩 되어있는 HTML 요소도 그 값에 따라 자동으로 렌더링 된다. 위의 그림에서 보면 알 수 있듯 watcher가 항상 자신의 영역을 지켜보고 있다.

 

Watchers

Watchers are simple functions that listen for changes on one or more pieces of state. 
Watchers are very helpful and usually used when there is a requirement to interact with a component that lives outside the React world (side effects)

 

출처 : https://velog.io/@jamie7dev/React-Data-binding