- 모델 : 애플리케이션에서 사용하는 데이터를 관리 하는 영역
- 뷰 : 사용자에게 보이는 부분
- 컨트롤러 : 모델 데이터를 조회, 수정, 변경 된 사항을 뷰에 반영
데이터가 변할 때 마다 어떤 변화를 줄지 고민하는게 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식 - 하지만 이 방식으로 하면 CPU 점유율, 메모리도 많이 차지 해서 고안한게 리액트이다. 오직 V 만 신경 쓰는 라이브러리.
컴포넌트
- 특정 부분이 어떻게 생길 정하는 선언체, 재사용이 가능한 API로 수많은 기능을 내장,
- 컴포넌트 하나에서 해당 컴토넌트의 생김새와 작동 방식을 정의함.
<리액트는 어떻게 작동하는가?>
1.초기 렌더링 - render() 함수를 통해 컴포넌트가 어떻게 생겼는지 정의. 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있는데 렌더 함수를 실행 하면 내부에 있는 컴포넌트 들도 렌더링 하며 DOM 요소 안에 주입한다.
- 리액트 에서 업데이트할때는 업데이트 과정을 거친다 라고 하기 보다는 조화 과정을 거친다. 라고 할수 있다. 컴포넌트는 데이터 업데이트를 했을때 단순히 업데이트 값을 수정 하는게 아니라 렌더 함수를 다시 호출해 새로 갈아 끼어 넣는다. 이때 렌더 함수가 만들었던 컴포넌트 정보와 현제 렌더 함수가 만든 컴포넌트 정보를 비교 해 둘의 차이를 알아내서 새로운 업데이트 컴포넌트만 DOM 트리에 업데이트 해 최소한의 업데이트만 해서 능률이 높혀진다.
DOM은 정적이다. 예로 페이스북에서 스크롤을 내렷을때 새로운 데이터들을 읽어 온다. 여기서 기존 DOM은 CSS, 레이아웃등 페이지를 다시 구성하고 리페인트한다. 여기서 시간 소모가 된다.
하지만 Virual DOM을 사용 하면 실제 DOM을 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
react는 프레임워크가 아니라 라이브러리다. 해서 다양한 리액트 라이브러리가 필요하다. 예) 라우팅 - 리액트 라우터/ Ajax 처리 - axios, fetch / 상태 관리 - 리덕스, MobX
