필요한 라이브러리

React

뷰를 만들기 위해 존재하는 라이브러리이다.

말 그대로 사용자에게 보여지는 화면을 구성할 때 사용되는 것이다.

ReactDOM

컴포넌트들을 웹 브라우저에 그리는 역할을 한다.

HTML은 <태그></태그>기반으로 동작을 하는데,

이 태그들을 트리로 구성하여 관리하는 것이 바로 DOM(Document Object Model)이다.

HTML은 트리구조로 DOM을 관리한다.

플러터에서도 트리구조로 UI를 관리한다.

프론트에서는 대부분 트리구조로 UI를 관리하는 듯하다.

아무튼 이 DOM에 새로운 요소들을 추가하거나 삭제를 하려면, 기존의 Javascript에서는

var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);

위와 같은 식으로, document.createElement를 통해 객체를 생성하고,

append를 통해 추가하는 식으로 사용해야한다.

하지만, React에서는 Virtual DOM을 사용한다.

Virtual DOM

기존의 DOM은 React의 Virtual DOM에 비해 무겁다고 한다.

바닐라 JS에서 하나의 요소를 삭제하는 과정을 나열해보자.

1. document.getElementById(id) 를 통해 요소를 찾는다.
2. element.parentNode.removeChild() 를 통해 자식노드를 제거한다
3. DOM 트리 내부에서 위 2가지 단계를 수행하여 노드를 제거한다.

하지만 Virtual DOM에서는 성능을 추구한다.

React는 가상 DOM을 통해 실제 DOM 조작 횟수를 최소화하고

효율적으로 업데이트를 수행하여 렌더링 속도를 향상시킨다.

요소의 변경 사항이 실제로 반영되기 전에 가상 DOM을 통해

일련의 비교와 최적화 단계를 거치게 된다.

React는 Virtual DOM에서 사용한 API를 DOM API와 매핑을 시켜놨는데,

이 모든 과정들은 이전 장의 명령형 프로그래밍 방식으로 구현이 되어있고,

단지 사용자는 선언형 프로그래밍 방식으로 사용을 하는 것이다.

바닐라 리액트 사용하기

스크립트 불러오기

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<script> 태그를 통해 React와 ReactDOM 라이브러리를 불러온다.

객체(컴포넌트) 생성하기

const mainTtile = React.createElement('h1', { className: 'main-title' }, '안녕하세요');

<h1 class="main-title">안녕하세요</h1>

위 코드를 통해 아래의 html 컴포넌트를 생성할 수 있다.

React.createElement()함수는 바닐라JS의 document.createElement()와 비슷하게 요소를 추가하는 역할을 한다.

다만 React는 Virtual DOM API를, 바닐라JS는 DOM API를 조작할 뿐이다.

대체된 예약어

React에서는 html의 class를 className으로 대체되어있다.

나중에 JSX파트에서 쓴다.

화면에 표시하기

ReactDOM.render(
  mainTtile,
  document.getElementById('root')
);

객체는 React 라이브러리를 통해 생성할 수 있다.

화면에 표시하려면 ReactDOM 라이브러리를 땡겨와서, render함수를 사용하여 표시한다.

첫 번째 인자는 React.createElement()로 생성한 컴포넌트를,

두 번째 인자는 어느 컴포넌트의 하위에 생성할 지 위치를 정할 수 있다.