React와 데이터 바인딩

데이터 바인딩이란?

두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다.

화면에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 일치시키는 기법이다.

데이터 바인딩은 양방향/단방향이 있다.

단방향 데이터 바인딩은 데이터와 템플릿을 결합하여 화면을 생성한다.

반면, 양방향 데이터 바인딩은 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다. > 즉, 화면 사이의 데이터가 계속해서 일치하게 된다.

 

단방향 데이터 바인딩

컴포넌트 내에서 '단방향 데이터 바인딩'은 JS(Model) -> HTML(View) 처럼 한 방향으로만 데이터를 동기화하는 것이다.

역으로 JS(Model) <- HTML(View) 은 (직접적으로는) 불가능하다. 데이터의 변화를 감지하고 화면을 업데이트 하는 이벤트 함수를 사용하면 가능하다.

 

양방향 데이터 바인딩 (자동 동기화)

컴포넌트 내에서 '양방향 데이터 바인딩'은  JS(Model)과 HTML(View) 사이를 묶어주는 ViewModel이 존재하여 둘 중 하나만 변경되어도 함께 변경되는 것을 의미한다. JS(Model) <-> ViewModel <-> HTML(View)

JS가 업데이트 되면 HTML이 업데이트 되고, 반대로 HTML이 업데이트되면 JS가 업데이트 된다.

# 양방향은 데이터의 흐름을 예측하기 어렵다는 단점이 있다.

 

React와 데이터 바인딩

React는 단방향 데이터 바인딩을 사용한다.

따라서 state를 관리할 때 props를 통해 부모에서 자식으로 데이터 흐름이 일어난다.

위에서 말했듯이 단방향 데이터 바인딩에서도 이벤트 함수를 통해 역으로 자식이 부모를 업데이트할 수 있다.

부모에서 자식에게 전달한 이벤트 핸들러를 통해 부모의 state를 변경하도록 state 끌어올리기(lifting state up)를 사용할 수 있다.

 

 

참고

https://gitnyang.tistory.com/67

https://adjh54.tistory.com/49 (데이터 바인딩)