- 리액트: 자바스크립트 프론트엔드 라이브러리
주로 모델과 뷰의 구조.MVC, MVW
모델은 앱에서 사용하는 데이터 관리
뷰는 사용자가 보는 부분
사용자의 입력을 받으면 컨트롤러는 데이터를 수정 후 뷰에 반영
앱의 규모가 클수록 복잡해짐
리액트는 데이터가 변할때 마다 변화를 주는 것이 아닌
기좀 뷰를 날리고 새로 렌더링.
렌더링 - 사용자 화면에 뷰를 보여주는 것
리액트는 ui에 사용
mvc, mvw 구조 대신 v(뷰)만.
리액트가 새롭게 렌더링 하면서 성능 아끼고 최적 어떻게?
-> 리액트 컴포넌트가 최초 실행한 초기 렌더링
-> 데이터 변경으로 다시 실행하는 리렌더링
-
초기 렌더링
어떤 ui 프레임워크든 맨 처음 어쩧게 보일지 렌더링이 필요
리액트에서는 render 함수.
render() {...}
최상위 컴포넌트 렌더링이 끝나면 지닌 정보로 HTML마크업 만들고
DOM에 주입 -
조화 과정
리액트에서 뷰 업데이트 과정을 '조화 과정 (reconciliation)' 이라고 부름
보기에는 데이터가 변경될 때 뷰가 변경되는것 같지만 실제로는 새로운 요소로 갈아 끼움. 이 작업을 render함수
데이터가 업데이트 됐을 때 새로운 데이터 가지고 render함수를 다시 호출
이때 render 함수는 만든 컴포넌트 정보를 이전 정보와 비교후 최소한의 연산으로 DOM 트리 업데이트.
-DOM이란?
Document Object Model. 객체로 문서 구조를 표현하는 방법. HTML로 작성
웹브라우저는 DOM을 활용해 객체에 js, css등 적용. 트리 형태
DOM은 동적 ui에 최적화 되어 있지 않다. Html자체로는 정적이고 js를 사용해 이를 동적으로 만든다
-Virtual DOM
DOM을 추상화 해 더 효율적
실제 DOM아닌 추상화해 js 객체 구성해 사용
업데이트 처리 간결성
-일부 웹 프레임워크가 mvc mvw 구조 지향한느것과 달리 리앧트는 오직 뷰만 담당. 리액트는 프레임워크가 아닌 라이브러리
