리액트 탄생 배경
자바스크립트의 수많은 프레임 워크들은 모델 뷰 아키텍쳐를 주로 이용함 이 과정에서 뷰를 변형해야 하는데 성능 문제 발생
⇒페이스북은 그냥 뷰를 날리고 새로운 뷰 렌더링 하는 방식으로 해결하고자 함
React 란 ?
view 만 신경 쓰는 라이브러리
리액트 프로젝트에서는 특정 부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트라고 한다.
컴포넌트란?
재사용이 가능한 api 로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 한다.
리액트가 뷰를 렌더링하는 방식
- 초기 렌더링
render(){…}- 컴포넌트가 어떻게 생겼는지 정의하는 역할
- html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
- 컴포넌트 내부에 또 다른 컴포넌트들이 들어갈 수 있는데 이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링
- 최상위 컴포넌트의 렌더링작업이 끝나면 지니고 잇는 정보들을 사용하여 Html 마크업을 만들고 이를 우리가 정하는 실제 페이지의 dom 요소 안에 주입
- 조화 과정 (업데이트 )
컴포넌트에서 데이터에 변화가 있을 때 뷰가 변형되는 것이 아니라 새로운 요소로 갈아 끼우는 것임
이작업도 render(){…}함수 호출 ⇒ 새 데이터를 지닌 뷰 생성
이때 render 함수가 반환하는 결과를 곧바로 dom 에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 혀재 render 함수가 만든 컴포넌트 정보를 비교
최소한의 연산으로 비교하여 둘의 차이를 알아내여 최소한의 연산으로 dom 트리를 업데이트
리액트의 특징
virtual dom을 사용한다.
dom(document object model )이란?
- 객체로 문서 구조를 표현하는 방법으로 xml 이나 html 로 작성한다.
- 웹 브라우저는 dom 을 활용하여 객체에 js 와 css 를 적용한다.
- dom 은 트리 형태라서 특정노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다 .
dom 의 문제점
동적 ui 에 최적화 되어 있지 않다.
대규모 웹 애플리케이션에서 dom에 직접 접근하여 변화를 주다 보면 성능 이슈 발생
해결방안
dom 을 조작할 때 마다 엔진이 웹페이지를 새로 그리기 때문에 성능이 저하되는 것이기 때문에 virtual dom 을 이용해 dom을 최소한으로 조작하여 해결할 수 있음
virtuladom 이란?
리액트에서 돔을 업데이트 하는 과정
- 데이터를 업데이트 하면 전체 ui 를 virtual dom 에 리렌더링
- 이전 virtual dom 에 있던 내용과 현재 내용을 비교합니다.
- 바뀐 부분만 실제 dom 에 적용합니다.
⇒ 리액트와 virtual dom 은 업데이트 처리 간결성을 제공