본 글은 러닝 리액트 2판 4장 리액트의 작동 원리 를 정리한 글입니다.
1. 필요한 라이브러리
React를 브라우저에서 띄우려면 React, ReactDOM 라이브러리를 불러야한다.
- React: View를 만들기 위한 라이브러리
- ReactDOM: UI를 실제 브라우저에 렌더링할 때 사용하는 라이브러리
2. 기본 HTML (cdn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
// 순수 리액트와 자바스크립트 코드
</script>
</body>
</html>
이런 설정들이 브라우저에서 React를 사용하기 위한 최소한의 요구 사항이다.
3. React
브라우저 DOM을 갱신해주기 위해 만들어진 라이브러리다.
코드로 DOM API를 직접 조작하지 않으며, 어떤 UI를 생성할지 지시하면 그에 맞춰 엘리먼트 렌더링을 조절해준다.
브라우저 DOM이 DOM 엘리먼트로 이뤄지는 거서럼, 가상 DOM은 React 엘리먼트로 이뤄진다.
🤔 React 엘리먼트?
실제로는 자바스크립트 객체이며, DOM API를 직접 다루는 것보다 자바스크립트 객체인 가상 DOM을 직접 다루는 편이 훨씬 빠르다
4. ReactDOM
React 엘리먼트를 브라우저에 렌더링하는데 필요한 모든 도구가 들어있다.
모든 엘리먼트들을 렌더링하기 위해 ReactDom.render 를 사용한다.
// (엘리먼트 타입, 엘리먼트의 프로퍼티, 엘리먼트 태그들 사이에 들어가는 자식 노드)
const member = React.createElement("hi", null, "신예찬");
// ~ v.17
ReactDOM.render(member, document.getElementById("root"));
// v.18 ~
const root = React.createRoot(document.getElementById("root"));
root.render(member);5. props.children 표현
React는 props.children 을 사용해 자식 엘리먼트들을 렌더링한다.
어떠한 리스트를 React.createElement로 나타내면 다음과 같다.
// AS-IS
<ul>
<li>신예찬</li>
<li>최상엽</li>
<li>조원상</li>
<li>신광일</li>
</ul>
// TO-BE
React.createElement(
"ul",
null,
React.createElement("li", null, "신예찬"),
React.createElement("li", null, "최상엽"),
React.createElement("li", null, "조원상"),
React.createElement("li", null, "신광일"),
);createElement는 네 번째 이후 추가된 인자는 다른 자식 엘리먼트로 인식한다.
이를 콘솔에 찍어보면 아래와 같은 결과가 나온다.
{
"type": "ul",
"props": {
"children": [
{ "type": "li", "props": { "children": "신예찬" }},
{ "type": "li", "props": { "children": "최상엽" }},
{ "type": "li", "props": { "children": "조원상" }},
{ "type": "li", "props": { "children": "신광일" }},
]
}
}React는 자식 엘리먼트들을 배열로 만들고 props.children을 그 배열로 설정한다.
6. Component
모든 사용자 인터페이스는 여러 부품으로 이뤄진다.
컴포넌트를 사용해 새로운 인스턴스를 만들기만 하면 규모 확장성이 있는 구조를 설계할 수 있다.
const members = ["신예찬", "최상엽", "조원상", "신광일"];
function MemberList(props) {
return React.createElement(
"ul",
{ className: "memberList" },
props.items.map((member, i) =>
React.createElement("li", { key: i }, member)
)
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
React.createElement(MemberList, { items: members }, null)
);
// result
<MemberList items=[...]>
<ul>
<li key="0">신예찬</li>
<li key="1">최상엽</li>
<li key="2">조원상</li>
<li key="3">신광일</li>
</ul>
</MemberList>