React | 양방향 바인딩과 단방향 바인딩

Jeremy·2022년 10월 12일
0

데이터 바인딩이란?

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

양방향 바인딩


양방향 바인딩이란 위처럼 Model과 View의 데이터가 양방향으로 서로 업데이트 된다. View에서 어떤 데이터를 업데이트하면 Model의 데이터도 변경되며 Model의 어떤 데이터를 업데이트해도 View의 값이 변경된다.

단방향 바인딩


단방향 바인딩이란 템플릿과 모델이 결합하여 View에 반영되는 방식이다. 단방향 바인딩의 경우 데이터의 변화를 감지하여 동작하게 하는 코드를 매번 작성해줘야 한다. 이벤트함수가 그러한 코드이다.

양/단방향 바인딩의 장단점

양방향 바인딩의 장점 : 별도의 코드입력없이 업데이트를 감지하고 작동하기에 코드작성이 간편하다.

양방향 바인딩의 단점 : 모든 변화를 감지하기에 성능이 저하된다.

단방향 바인딩의 장점 : 필요한 부분만 코드작성하여 이벤트를 감지하면 되기에 성능적인 측면에서 우세하다.

단방향 바인딩의 단점 : 코드작성이 까다롭다.

profile
chill~

0개의 댓글