[항해99] Day23. TIL – 양방향 바인딩이란?

👩🏻‍💻 Today I Learned 📚

 

 

✨ 데이터 바이딩이란?

두 데이터 혹은 정보의 소스를 일치시키는 기법으로, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 객체)를 일치시키는 것을 말한다. 예를 들어, MVC 모델에서 model과 view를 서로 묶어 model과 view의 “자동 동기화” 시키기 라고 이해할 수 있다

 

 

✨ 양방향 데이터 바인딩

양방향 바인딩이란, 자식 컴포넌트에서 발생하는 이벤트를 감지하는 바인딩과 자식 컴포넌트에 데이터를 전달하는 프로퍼티 바인딩이 결합된 형태를 말한다.

장점 : 데이터를 직접 렌더링 해줄 필요가 없기 때문에 그와 관련한 코드가 필요 없어져서 코드가 짧아진다.

⇒ 양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 변경한다. 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 체크해주지 않아도 된다.

단점 : 바인딩 된 모든 요소들을 일괄적으로 DOM이 렌더링하기 때문에 성능면에서 이슈가 생긴다.

 

 

✨ 리액트에서 양방향 바인딩을 사용할 경우

부모 컴포넌트(A)가 리렌더링 될 때, 자식 컴포넌트(B) 역시 부모 컴포넌트에게 영향을 받아서 리렌더링이 된다. 이걸 단방향 바인딩이라고 하는데, 양방향 바인딩이 되려면 자식 컴포넌트에 있는 state를 부모 컴포넌트에서 props로 받아야 한다. 이렇게 되면 어느 한쪽이 리렌더링이 되면서 따라서 계속해서 양 사이드가 모두 무한대로 리렌더링 된다.

 

 

지난주 개인과제 결과가 나왔다. 나는 통과 못함…너무 충격적이였다. 지난 주에 개인과제는 수요일에 다 끝내서 일찌감치 제출을 했을 정도였기에 통과를 믿어 의심치 않았다. 하지만 오늘 받은 결과는 fail. 😓 개인과제에서 요구하지 않았던 기능이 더해져서 실패를 한거다. 심지어 만들어진 앱도 잘 사용되는데 말이다…………이 결과에 굴복하지 못하고 매니저님에게 가서 이야기를 해야하나 라고 생각했지만, 내가 개인 과제에서 제시했던 부분을 제대로 이행하지 못해서 받은 결과라면 받아들여야 한다고 생각했고,, 그 요구를 충족하는 방식으로 다시 코드를 짜기 위해서 들여다보다가 결국에는 멘토님께 도움을 청했다. 내 과제를 본 멘토님은 잘했다고 칭찬을 하셨는데, ㅋㅋ 나는 이거 통과 못 했는데요? 라고 … 멘토님은 매니저님께가서 항의하라고 ….아이고 말씀만으로도 뭔가 기분이 좋았다. 그래서 이번주 과제는 기본 뼈대는 다 잡고, 데이터도 다 짰는데, 계속해서 요구사항을 하나하나 체크해보고 있다. 문제를 제대로 이해하는 것도 엄청나게 중요하다는 걸 깨달았다. 단순히 기능이 제대로 굴러간다고 안심했다가 뒷통수 맞아서 ……. 크흐,….