React.js 소개
데이터와 화면을 연결하는 방법
리액트나 뷰 같은 UI 라이브러리의 가장 큰 특징은 화면에 출력되는 유저 인터페이스 상태로 관리할 수 있다는 점이다. 브라우저는 돔을 통해 어플리케이션을 렌더링한다.
<body>
<script>
let data = "Hello world"; // Model
document.body.innerHTML = '<p>${data}</p>'; // 위에 입력한 data 값이 화면에 출력된다.
data = "안녕" // 변경하고 싶은 데이터 내용을 입력해준다.
document.body.innerHTML = '<p>${data}</p>';
</script>
<body>=> 결과값으로 화면에 안녕이라는 값이 출력된다.
// 해당 모델을 뷰모델 또는 VM 이라고도 한다.
const state = {
_data: "Hello world",
}; // state 변수로 데이터를 정의해준다.
const render = {} => document.body.innerHTML = '<p>${state.data}</p>'; // render 함수를 사용하여 해당 데이터를 화면에 표시해준다.
Object.defineProperty(state, "data", {
get() {
console.log('get')
return state._data
}, // 값 추가
set(value) {
console.log('set')
state._data = value;
render(); // 값을 할당하면 화면을 해당 값으로 변경해주는 작업
}, // 값 할당
}); // state 상의 데이터 변수는 _data로 정의되어 있고 render 상의 데이터 변수는 data로 정의되어 있기 때문에 data라는 속성을 추가해주는 작업을 해준다.
reder(); // Hello world 출력
state.data = "안녕"; // 안녕 출력
state.data = "Hello world"; // Hello world 출력첫번째 코드는 데이터와 앨리먼트를 동시에 변경하면서 화면을 제어했다.
두번째 코드에서는 데이터만 제어하면 자동으로 화면까지 반응한다.
이러한 특정 값에 의존에 반응하는 것을 리액티브 =하다라고 표현한다.
-> 해당 코드와 같이 사용하게 되면 비교적 코드가 간단해지는 효과가 있다.
가상돔
데이터만 관리하면 값의 변화가 UI까지 반영되는 것은 무척 매력적인 아이디어다. 코드양이 줄어드니깐, 그만큼 버그도 줄어든다. 한편 상태 변화가 UI에 반영되려면 DOM API 호출은 불가피하다. 상태가 변하는 횟수만큼 돔 API호출은 비례한다. 이것은 브라우저 성능에 영향을 주는 요인이 된다.
브라우저가 HTML과 CSS 로 화면을 그리는 과정
1. HTML 코드를 파싱해서 DOM 트리를 만든다.
2. CSS코드를 CSSDOM 트리를 만든다.
3. 두 트리를 합쳐 렌더트리를 만든다.
4. 레이아웃을 계산한다.
5. 픽셀로 화면에 그린다.
❓ 파싱이란
문장을 그것을 이루고 있는 구성 성분으로 분해하고 그들 사이의 위계 관계를 분석하여 문장의 구조를 결정하는 것이다.
출처 : https://na27.tistory.com/230
-> 트리구조
위와 같은 구조일 때, 자바스크립트로 돔 구조를 변경하면 레이아웃다시 계산에 픽셀로 화면에 다시 그린다. 돔을 수정한만큼 이 작업이 반복되기 때문에 페이지 렌더링 성능에 영향을 준다.
🥕 이를 개선하기 위해서 어떻게 해야할까?
돔 API 적게 사용하면 된다. -> 돔 정보를 한 곳에 모아두고 그것을 한번에 불러오면 된다.
-> 가상돔을 사용하자!
어플리케이션에서 화면 변경을 돔에게 직접 요청하는 것이 아니라 가상돔에게 요청한다. 리액트는 렌더링할 때마다 전체 가상돔을 만들고 이전 가상돔과의 차이를 찾는다. 차이가 있는 부분만 실제 돔에 반영하고 차이가 없으면 렌더링 요청이 있더라도 무시하는 방식으로 성능을 개선할 수 있다.
⭐ 정리하기
-
모델 : 어플리케이션 상태를 관리한다.
-
뷰 : 돔으로 UI를 변경한다.
-
컨트롤러 : 모델과 뷰로 어플리케이션을 관리한다.
-> 이게 바로 MVC모델! -
리액티브 : 상태만 변경하면 자동으로 UI를 변경하게 하는 것
-
리액트 : 리액티브 프로그래밍으로 UI 개발을 할 수 있도록 돕는 라이브러리
-
가상돔 : 매번 DOM에 접근하지 않고 꼭 필요할 때만 접근하는 방식으로 성능을 개선시키는 아이디어
