[TIL] 0916 리액트의 단방향 데이터 바인딩..?

면접 준비를 하면서 정말 생각보다 너무 많이 모른 채로 무작정 코드를 작성했구나 반성하게 된다. 

면접 질문 중 리액트 선정 이유에 대해서 설명하였는데 리액트의 단방향 데이터 바인딩 덕분에 흐름을 파악하기 쉽다는 장점을 들었을 때 팀원 중에서 "리액트는 그러면 단방향 데이터 바인딩만 하고 양방향은 안되냐"는 질문을 하셨다. 

내가 알기론 양방향 데이터 바인딩이 되지만 주로 단방향 데이터 바인딩인 것으로 알고 있어서 제대로 대답하지 못했다!

또한, 데이터 바인딩과 이벤트 전파에 대한 추가 질문을 던지셨는데 내가 생각했던 리액트의 단방향 데이터 바인딩은 

state를 props로 내려주는 것만 생각하고 있었어서 이벤트와 직접적으로 연관이 있는 줄은 몰랐다. (이건 제대로 찾아봐야 할 거 같다 데이터 바인딩에서 "데이터"가 정확히 뭔 지 모르겠다.)

 

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

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

감이 크게 잡히지 않아 확인해보니 백단과 프론트의 뷰의 데이터 일치가 가능한 것이 

양방향 데이터 바인딩이라고 한다! 

상세 설명을 하자면 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신하고 화면 입력에 따라 데이터를 갱신하는 것이다.

HTML -> JS , JS -> HTML 이 가능하단 소리!

 

데이터의 변경을 프레임워크에서 감지하고 있다가 데이터가 변경되는 시점에서 DOM객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS실행부에서 변경한다. 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 체크가 필요없다. 양방향 데이터 바인딩의 장점으로는 웹 애플리케이션의 복잡도가 증가하면 빛을 발한다고 한다. 수많은 코드의 양을 줄여주고 유지보수나 코드를 관리하기 쉽게 해준다는데.. 오류가 생겼을 때 흐름을 파악하는데 더 어렵지 않을까 생각하게 된다. 

 

단방향 데이터 바인딩이란 데이터와 템플릿을 결합해 화면을 생성하는 것이라고 한다.(JS-> HTML만 가능)

HTML 즉 진짜 DOM의 데이터 업데이트가 일어나면 그 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해주어야 한다. React는 단방향 데이터 바인딩을 한다는데 부모 view -> 자식 view로 바뀐 내용을 직접 전달한다고 한다. 

 

단방향 데이터 바인딩의 장점으로는 데이터의 변화에 따른 성능 저하 없이 DOM객체의 갱신이 가능한 것과 데이터 흐름이 단방향(부모-> 하위 컴포)이어서 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다는 점이다. 

사실 이것보다도 다른 내용을 확인해보니

단방향 데이터가 가지는 장점은 모든 Javascript 코드가 데이터에 집중되며 일관된 데이터 관리 로직을 갖는다는 점이다.

이게 좀 더 와닿는다. 단점은 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다는 점이다. 즉 코드가 길어진다는 소리다. 

 

화면에서 직접 해당 엘리먼트의 값을 바꿨을 때 Javacript의 데이터가 수정되도록 바인딩 하는 방법은 제공하지 않는다. 물론 양방향 바인딩과는 조금 다른 방법으로 화면의 데이터 수정을 Javascript 상 데이터로 가져올수 있다.
출처: https://theuphill.tistory.com/15 [오르막길을 올라가는 개발자:티스토리]

-> 이 말이 맞다면 내가 위에서 언급했던 리액트에서의 양방향 데이터 바인딩은 실질적으로 가능한 것이 아니라 useRef라는 hook을 사용하여 HTML의 데이터를 JS상 데이터로 가져와 연결하여 마치 양방향 데이터 바인딩이 되는 것처럼 한다는 것인가..? 잘 모르겠다. 

 

+ 2022 09 17 추가정리 

 

🔥데이터 바인딩? 

• 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것
• MVC모델을 예로 들면 Model과 View를 서로 묶어 Model과 View의 데이터를 서로 자동으로 동기화 시키는 것을 말한다. 

🔥바인딩이란? 

const number = 2;

const 는 자료형, number 은 이름(변수명), 2는 자료값에 해당한다. 

위와 같이 구체적인 값을 할당하는 각각의 과정을 바인딩이라고 한다. 

 

🔥양방향 데이터 바인딩?

백엔드 서버와 프론트의 뷰 양쪽의 데이터 일치가 모두 가능한 것을 말한다.

JS -> HTML , HTML -> JS

"데이터의 변화를 실시간으로 업데이트 한다." 라고 이해하면 된다. 

• 장점: 코드 사용면에서 코드량을 크게 줄여준다. 
• 단점: 변화에 따라 DOM객체 전체를 렌더링해주거나 데이터를 바꾸므로 성능 감소할 우려가 있음 

양방향 데이터 바인딩을 하는 

🔥단방향 데이터 바인딩? 

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

한마디로 "특정 이벤트가 일어나기 전까지 데이터의 변화가 일어나지 않는다!" 라고 이해하면 된다.

• 장점: 데이터의 변화에 따른 성능 저하없이 DOM 객체 갱신이 가능하다. 단방향 데이터 바인딩으로 흐름을 파악하기 쉽다. 
• 단점: 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 한다. (코드가 길어진다.)