02. 리액트 동작 원리

02-1 가상 DOM 이해하기

리액트 프레임워크를 구성하는 3요소 – 가상 DOM(Virtual DOM), JSX(JavaScript XML), 컴포넌트(Component)

React.StrictMode – 코드가 잘못되었는지 판단하여 오류 메세지를 보여주는 컴포넌트

reportWebVitals – 앱의 성능을 측정

react와 react-dom 패키지

react – 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능(컴포넌트, JSX, 리액트 훅 등)

Virtual DOM

react-dom/client – CSR(Client side Rendering) 방식
react-dom/server – SSR(Server side Rendering) 방식
react-native – 앱이 동장하는 플랫폼에 종속적인 방식

XML이나 HTML문서는 element로 구성되어 있으며, 그것들의 트리구조(tree structure) 또는 계단 구조(cascading tree)로 되어 있다.

DOM – document object model

자바스크립트 엔진

window – 웹 브라우저의 특정 웹 페이지를 의미하는 객체. BOM(browser object model)
document – HTML문서(요소)를 의미하는 객체. window.document로 접근
document.head, document.body – head와 body 요소를 의미
HTMLElement -> Element -> Node -> EventTarget

let element = document.createElement(localName [, options]);

let p = document.createElement("p");    // <p>요소 생성
document.body.appendChild(p);    // 렌더링

리액트를 사용하는 프런트엔드 개발(가상DOM)

import React from 'react'
import ReactDOM from 'react-dom/clinet'

const pVirtualDOM = React.createElement('p', null, 'Hello world!');
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(pVirtualDOM);

root.render() 메서드 – 가상 DOM을 물리 DOM으로 전화해 준다.

물리 DOM의 HTMLElement의 id 문제(중복 등.) 때문에 리액트에서는 가상 DOM을 사용한다.

02-2 JSX 구문 이해하기

React.createElement 호출의 복잡성 문제를 해결하기 위하여 JSX사용.

자바스크립트 문법에 새로운 문법을 추가한 언어 확장(language extension).

JavaScript + XML

import ReactDOM from 'react-dom/client'

const rootVirtualDOM = (
  <ul>
    <li>
      <a href="http://www.google.com" target="_blank">
        <p>go to Google</p>
      </a>
    </li>
  </ul>
)

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(rootVirtualDOM)

중괄호를 이용하여 자바스크립트 코드를 감싸는 형태의 문법.

return 없이 값을 반환해야 함. => 표현식(expression)

실행문(execution statement)은 넣을 수 없음.

<p>
  {/* string must be wrapped by Text */}
</p>

배열 사용 가능. 단, 부모 요소 없이는 사용 불가.