리액트와 뷰의 차이 - 불변성

리액트는 불변성을 특징으로 하고 있다.
이 불변성이란 값을 참조하는 주소가 바뀌지 않으면 값도 안바뀌었다고 인식하는 것을 뜻하는 것 같다.
뷰는 리액트와는 반대로 참조하는 주소값이 같아도 값이 바뀜을 인식해 화면을 업데이트하는 반응성(reactivity)을 제공한다.

이러한 차이는 서로 디자인 패턴이 다르기 때문에 발생하는 것 같다.

뷰는 MVVM 패턴을 사용한 프레임워크이고 리액트는 MVC 패턴을 사용한 라이브러리라고 알려져있다.
MVVM 패턴이라는 것은 MVC의 Controller를 View Model로 교체한 패턴을 뜻한다.
View Model은 뷰를 더 추상화한 계층이며, MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이라고 한다.

사실 이러한 말이 잘 와닿진 않는다.
MVC는 어떻고, MVVM은 어떻고… 글로는 알겠지만, 실제로 코드적으로 그래서 어떤 구조라는거지? 라는 느낌이다.

리액트와 뷰의 차이 - 불변성 VS. v-model, watch, computed

좀 더 리액트와 뷰의 코드적인 특징을 보면서 이해해보도록 하겠다.
뷰에는 반응성을 쉽게 만들어주는 장치들이 많다.

• v-model
• watch
• computed

위 3가지를 사용하면 양방향 데이터 바인딩을 쉽게 구현할 수 있다.
반면 리액트는 양방향 바인딩을 제공하지 않는다.
데이터의 흐름을 단순화하기위해 단방향 바인딩만을 제공한다.
때문에 데이터가 바뀌면 반드시 반응성을 위한 코드도 작성해줘야한다.
이는 MVC 패턴의 특징이다.
데이터의 흐름을 단순화해 코드 관리를 쉽게 하는 것, 하지만 코드 량이 많아질 수록 반응성을 직접 모두 구현해줘야하기 때문에 오히려 복잡해진다는 단점이 있다.
MVVM은 양방향 데이터 바인딩을 제공해 반응성을 쉽게 구현할 수 있게 해주는 것, 하지만 코드량이 많아질수록 데이터 흐름, 언제 어떻게 데이터가 바뀌는지 디버깅이 어려워진다는 단점이 있다.

현재는 MVC 패턴, MVVM 패턴을 리액트와 뷰에 빗대어 이 정도로 이해하고 있다.