[SeSAC] React - 데이터 바인딩

 

 

1. 데이터 바인딩

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

 

 

저는 위의 데이터 바인딩 정의보다 아래 정의를 통해 더 이해가 되었습니다.

화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것

 

 

제가 아는 회원가입의 경우를 예로들어 보면 (다른방식도 많을거라고 생각합니다.)

이 경우는 화면 데이터 --> 메모리 데이터 순서로 동기화를 한 경우입니다.

1. 유저는 ID,PW 와 같은 화면에 보여지는 사용자가 데이터를 입력하고 회원가입 버튼을 누릅니다.
2. 이때 이벤트를 발생시켜서 HTML요소 안에서 사용자가 입력한 데이터를 찾아서 변수에 할당(메모리에 저장)합니다.
3. 변수에 할당한 사용자 입력 데이터를 백엔드로 보내서 회원가입 처리를 요청합니다.
4. 요청에 대한 응답을 받은 후 사용자에게 회원가입처리의 결과를 알립니다.

사용자가 입력한 데이터는 화면상에 보여지는 HTML안에 있습니다.
이후에 그 데이터를 자바스크립트를 써서 변수에 할당함으로써 브라우저 메모리에 저장 합니다.
이렇게 함으로써 1. 사용자가 입력한 데이터 와 2. 브라우저 메모리에 저장된 변수는 일치(동기화)하게 되었습니다.

 

아래는 메모리 데이터 --> 화면 데이터 순서로 동기화를 한 경우 입니다.

1. ejs 템플릿 엔진(자바스크립트가 내장되어 있는 html 파일) 을 사용
2. ejs는 내장된 자바스크립트를 통해 메모리에 저장되어있는 데이터를 사용 (ex. 회원가입시 기입한 사용자의 ID)
3. 사용자가 회원가입 할때 사용한 ID를 화면데이터(HTML)에 추가 해서 화면을 보여준다. (ex. ID님 환영합니다.)

이때 메모리 데이터에 저장된 사용자의ID 데이터는 화면상에 보여지는 HTML안에 존재합니다.
즉, 메모리에 저장된 데이터를 화면상에 보여지는 데이터와 일치(동기화) 시켰습니다.

 

 

아마 저는 여태까지 이런방식을 사용해서 계속 데이터 바인딩을 해왔던게 아닌가 라고 생각합니다.

 

 

2. 양방향 / 단방향 데이터 바인딩

 

그렇다면 양방향 / 단방향 데이터 바인딩은 무슨 차이일까요?

결과를 먼저 말하면 '양방향', '단방향' 데이터 바인딩을 나누는 기준은 화면 데이터(HTML)에서 변경된 내용이 메모리에 저장된 데이터에 영향을 미치는 가 입니다.

 

위에 설명에서도 데이터를 동기화하는 순서를 화살표를 통해 표현했는데 이둘을 나누는 차이는 이것과 관련있습니다.

 

단방향 데이터 바인딩의 경우 :  

 - 메모리 데이터 --> 화면 데이터 순서로만 데이터 바인딩이 가능 

 - 즉, 자바스크립트 --> HTML 로만 바인딩이 가능한 것 

 - 화면데이터(HTML)의 변경이 있더라도 메모리 데이터에는 변화가 없겠죠(동기화가 이루어지지 않음)

 

양방향 데이터 바인딩: 

 - 메모리 데이터 <--> 화면 데이터  양쪽으로 모두 데이터 바인딩이 가능 

 - 즉, 자바스크립트 <--> HTML 로 데이터 바인딩이 가능 

 - 화면데이터(HTML)의 변경은 메모리 데이터의 변경을 발생시켜 동기화 한다. 

 - 메모리 데이터의 변경은 화면데이터(HTML)의 변경을 발생시켜 동기화 한다.

 

 

3. 각각의 장단점

출처.&nbsp;https://oliviakim.tistory.com/91

 

4. 결론

1. 데이터 바인딩이란 화면 데이터와 메모리에 저장된 데이터를 일치(동기화) 시키는 동작을 말합니다.

2. 양방향 데이터 바인딩이란 화면 데이터와 메모리에 저장된 데이터가 양쪽방향 전부 영향을 주어 동기화 되는것.

3. 단방향 데이터 바인딩이란 메모리에 저장된 데이터가 화면 데이터에 영향을 주어 동기화 되는것.

 

 

 

 

 

참고.

https://oliviakim.tistory.com/91