왜 리액트인가?
값을 업데이트 하려면 요소를 찾아 내부를 수정하면 됨
이는 간단해 보이지만, 애플리케이션 규모가 커진다면?
아마 상당히 복잡해질 것이다.
페이스북 개발 팀은 이를 해결하고자 아이디어를 냈다.
바로 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아닌 그냥 기존 View(사용자에게 보이는 UI)를 날리고 처음부터 새로 렌더링하는 방식이다.
하지만, 이렇게 하면
- CPU 점유율↑
- 메모리도 많이 사용
- input태그에 값을 입력할 때마다 새로 렌더링되며 끊김 현상 발생
그래서 만들어진 것이 리액트(React)
리액트 이해
오직 뷰(View)만 신경 쓰는 라이브러리
렌더링: 사용자 화면에 뷰를 보여 주는 것
컴포넌트
- 특정 부분이 어떻게 생길지 정하는 선언체
- 재사용이 가능한 API로 수많은 기능을 내장
- 해당 컴포넌트의 생김새, 작동 방식을 정의
컴포넌트와 템플릿 차이
- 템플릿
: 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환 - 컴포넌트
: JSX 요소를 반환. 이는 리액트 엘리먼트(React Element)로 변환되어 리액트 엔진에 의해 처리됨
리액트는 어떻게 데이터가 변할 때마다 새롭게 리렌더링되면서 성능을 높였을까?
이를 이해하기 위해 2가지를 이해해야 함
1. 컴포넌트가 최초로 실행한 초기 렌더링
2. 컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링
📍 추가설명
초기 렌더링
render 함수
- 리액트에서 초기 렌더링을 다루는 함수
- 컴포넌트가 어떻게 생겼는지 정의하는 역할
- html 형식의 문자열이 아닌, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환(이것이 React Element)
📍 참고)
클래스 방식 컴포넌트
: Component 클래스를 상속받아 render 메서드를 사용하여 JSX를 반환
함수 방식 컴포넌트
: 함수를 사용하여 JSX를 직접 반환합니다.
두 컴포넌트 모두 <div>, <h1>, <p> 등의 JSX 요소를 반환
이렇게 반환된 JSX는 리액트 엘리먼트로 해석되어 리액트 엔진에 의해 처리되고 화면에 렌더링
// 클래스 방식 컴포넌트
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return (
<div>
<h1>안녕</h1>
<p>나는 클래스 방식 컴포넌트야</p>
</div>
);
}
}
export default ClassComponent;// 함수 방식 컴포넌트
import React from 'react';
const FunctionComponent = () => {
return (
<div>
<h1>안녕</h1>
<p>나는 함수 방식 컴포넌트야</p>
</div>
);
}
export default FunctionComponent;
컴포넌트는 html 태그를 반환하는것 처럼 보이지만
React Element를 반환함
React Element
: 해당 컴포넌트가 렌더링 하고자 하는 UI의 모든 정보를 가지고 있는 객체
프로젝트에 모든 React Element를 모아서 Virtual DOM을 만든다
Virtual DOM
- 실제 DOM 아님
- React Element 객체값들을 모은 것
즉, JavaScript 객체값이다.
그래서 수정, 삭제 등이 자유롭고 연산이 오래 걸리지 않는다.
만들어진 Virtual DOM을 실제 DOM에 반영해서 브라우저 렌더링한다.
여기서 의문?
질문: Virtual DOM을 사용하면 단계가 늘어서 복잡해 보이는데 왜 이렇게 함?
답변: DOM 수정 적게 하기 위함
리렌더링
리액트에서 수정사항이 생기면 React Element를 만드는 것부터 다시 시작해서 새로운 Virtual DOM을 만든다.
그리고 이전에 만든 Virtual DOM과 차이를 비교한다.
차이가 있는 부분만 실제 DOM에 반영한다. (이렇게 모아서 한번만 DOM을 수정)
이러한 과정을 조화(Reconciliation)라고 함
결국 방식 자체는 처음부터 다시 렌더링하는 것처럼 보이지만
사실은 최적의 자원을 사용하여 수행함
