React Document 2 : Element, Component

🐤 순수 JavaScript로 HTML 만들기

JavaScript는 'document' 객체의 createElement() 함수로 HTML 요소를 생성한다.

<body>
    <div id = "root"></div>

    <script>
        const root = document.getElementById("root");
        const h6 = document.createElement("h6");
        h6.className = 'greeting'
        h6.textContent = 'Hi, Stranger';

        root.appendChild(h6);
    </script>
</body>

DOM은 Document(HTML)를 Object처럼 변경, 수정, 삭제 등이 가능하도록 하는 인터페이스(Model)이다. DOM은 UI요소에 관한 정보를 노드에 저장한다. 즉 Document Node, Element Node, Attribute Node, Text Node, Comment Node 등의 노드들이 계층적 구조를 이루면(?) DOM이다. DOM은 웹 페이지를 객체화 한 느낌이고 JavaScript는 DOM을 통해 HTML 요소를 생성, 삭제 등이 가능하다. 즉 JavaScript는 'document' 객체를 사용해서 DOM을 조작한다 (=HTML 요소를 조작한다)

🐤 React.createElement로 HTML 요소 만들기

const element = React.createElement(
    'h6',
    {className: 'greeting'},
    'Hi, Stranger'
);

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

🐤 React Element

React Element는 React의 가장 작은 단위로 화면에 무엇을 그리고 싶은지에 대한 정보를 담고 있는 가벼운 JavaScript 일반 객체이다. React.createElement() 함수로 React Element를 생성한다. DOM Element와 다르게 React Element는 생성하기 쉽다.

const element = React.createElement(
    'h6',
    {className: 'greeting'},
    'Hi, Stranger'
);

React로 구현된 어플리케이션은 보통 모든 React Element가 들어가는 'root'라는 DOM 노드가 하나 있다.

reactDOM.render로 React Element를 루트 DOM 노드에 렌더링한다.

<div id="root"></div>

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

React Element는 불변객체로 Element를 생산한 이후에는 자식, 속성을 변경할 수 없다.

그럼 UI를 업데이트하고 싶을 때마다 매번 새로운 Element를 생성해서 ReactDOM.render()로 루트 DOM 노드에 렌더링한다.

🐤 React Component

UI를 재사용 가능한 개별적 묶음으로 나누고 모듈화한 것을 Component라고 한다. 즉 React에서는 버튼, 폼 등등을 하나의 Component로 만들고 여러 개의 Component를 모아 UI를 구성하며 Component는 여러 개의 Element로 구성되어 있다. Component는 함수 또는 클래스로 정의할 수 있다. (Component 이름은 대문자로 시작)

function Greeting(props) {
    return <h1>Hi, {props.name}</h1>
}

class Greeting extends React.Component {
    render() {
        return <h1>Hi, {this.props.name}</h1>
    }
}

함수형 컴포넌트와 달리 달리 클래스형 컴포넌트는

State가 있다
LifeCycle이 있다
Component를 상속 받는다
엘리먼트를 render 함수로 반환 (함수형 컴포넌트는 엘리먼트를 return문으로 반환)
this 키워드

🐤 ReactDOM.render

ReactDOM.render 함수로 React Element를 DOM 노드에 추가해서 화면에 렌더링 한다.

Virtual DOM은 DOM을 추상화 한 가상의 JavaScript 객체로 DOM의 가벼운 사본 같은 느낌이다. Virtual DOM이 필요한 이유는 실제 DOM을 조작하면 일어나는 렌더링이 비효율적이기 때문이다.

브라우저 렌더링
1️⃣ 웹 문서를 로드
2️⃣ HTML을 파싱해서 DOM을 생성
3️⃣ CSS를 파싱해서 CSSOM을 생성
4️⃣ DOM + CSSOM → Render Tree를 생성
5️⃣ 생성한 RenderTree를 실제로 배치(=Layout)
6️⃣ 생성한 RenderTree를 실제로 그림(=Paint)

ex) 내가 DOM의 요소를 1000개 수정하면 렌더링이 1000번 일어나는 느낌으로 비효율적이다. (실제로 1000번이 일어나지는 않는다) 그래서 DOM을 가상화 한 객체 Virtual DOM을 메모리에 만들어 놓는다. JavaScript가 HTML 요소를 변경하면 Virtual DOM을 수정한다. 나중에 Virtual DOM의 모든 변경사항을 모아 실제 DOM과 비교한 후 최소한의 변경사항만 실제 DOM에 반영한다.

[React] 리액트를 처음부터 배워보자. — 02. React.createElement와 React.Component 그리고 ReactDOM.render의

이 글을 남기는 계기는 Dan Ambramov의 블로그 Overreacted를 보며 React.js에 대해 더 깊이 공부할 필요성을 느꼈기 때문이다.

medium.com

ReactDOM.render() 함수로 React Element를 실제 DOM에 렌더링한다. ReactDOM이 React Element와 일치하도록 DOM을 업데이트 한다.

'보지마세요' 카테고리의 다른 글

[구현] 백준 1004번 (C++) (0)	2022.06.09
create-react-app 없이 React App 생성하기 (0)	2022.06.04
React Document 1 : React란? (0)	2022.06.02
Spring 공부하기(3) - 회원 서비스 만들기 (0)	2022.05.25
Spring 공부하기(2) - 회원 도메인, 리포지토리 만들기 (0)	2022.05.25