더북(TheBook)

언뜻 보기에는 굉장히 많은 작업이 필요한 것처럼 보이지만, React를 조금 더 사용해본다면 이런 접근 방식에 고마움을 느끼게 될 것이다. 이 방식을 단방향 바인딩이라고 부르는데, 상태가 뷰를 갱신하는 것이 전부이기 때문이다. 뷰에서 상태를 바꾸는 반대 경우는 없고, 단지 상태가 뷰를 바꾸는 편도 여행이라고 할 수 있다. 단방향 바인딩을 사용하는 라이브러리의 경우, 상태나 모델을 자동으로 갱신하지 않는다. 여러 개의 뷰에서 암묵적으로 상태 또는 데이터 모델을 갱신하거나 역으로 상태가 뷰를 갱신하는 거대한 규모의 앱을 다룰 때 복잡도를 제거할 수 있다는 것이 단방향 바인딩의 대표적인 이점이다(그림 7-2 참조).

단순하다는 것이 항상 적은 양의 코드를 의미하지는 않는다. 때로는 앞의 경우처럼, 이벤트 핸들러에서 데이터를 받아 뷰에 표시할 상태를 직접 추가 작성해야 하는 경우도 있다. 그렇지만 이 방식은 복잡한 UI를 다루거나 무수히 많은 뷰와 상태를 가진 단일 페이지 애플리케이션을 만들 때 더욱 유리하다. 단순하다는 것이 항상 쉬운 것은 아니다.

반면에 양방향 바인딩은 명시적으로 과정을 구현하지 않아도 뷰에서 상태를 자동으로 갱신한다. 양방향 바인딩은 Angular 1의 작동 방식이기도 하다. 흥미롭게도 Angular 2에서는 React의 단방향 바인딩 개념을 가져와서 기본값으로 설정했다(양방향 바인딩을 명시적인 방법으로 사용할 수도 있다).

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.