양방향/단방향 바인딩

✨리액트 단방향 바인딩

✅데이터 바인딩?

데이터 바인딩이란 UI와 UI가 표시하는 데이터를 연결하는 프로세스이다. 데이터가 변경되면 내부의 데이터가 자동으로 업데이트되어 변경 내용을 반영시킨다.

즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시킬 때 사용하는 기법이다.

✅양방향 데이터 바인딩

양방향 데이터 바인딩은 사용자의 UI의 데이터 변경을 감시하는 왓처와 자바스크립트 안에서 데이터를 변경을 감시하는 왓처를 통해 UI와 프로그램 안에 데이터를 자동으로 동기화 해준다.

데이터 하나에 두 개의 왓처가 사용되기 때문에 간단한 기능인데도 오버 스펙인 경우가 생길 수도 있고, 수 많은 왓처들로 인해 성능 저하 문제가 발생할 수도 있다.

하지만 웹 애플리케이션의 복잡도가 증가하면 유지보수나 코드를 관리하기 쉽다는 장점이 있다.

✅단방향 데이터 바인딩

하나의 왓처가 자바스크립트의 데이터 갱신을 감지하고, 사용자의 UI를 갱신한다. 사용자가 UI를 통해 데이터를 갱신할 때에는 왓처가 아니라 이벤트를 통해 데이터를 갱신한다.

하나의 왓처를 사용하기 때문에 양방향 데이터보다 성능 저하 없이 데이터 갱신을 할 수 있다는 장점이 있다. 또한 데이터가 부모에서 자식으로, 즉 단방향으로 흐르기 때문에 코드를 이해하기 쉽고, 디버깅이 쉽다는 장점이 있다.

하지만 데이터를 갱신할 때는 매번 이벤트를 발생시켜야한다는 단점이 있다.

참고 자료

• 현장에서 바로 써먹는 리액트 with 타입스크립트
• 데이터 바인딩 개요(WPF .NET)
• [React] 단방향 바인딩과 양방향 바인딩