InDepthEngineering-REACT- 기사 — 2

Jan 08 2023

참조용으로 이 링크를 따라 이전 기사로 이동하십시오. 언제나 그렇듯 제 글에 관심을 가져주시는 모습을 보니 기쁩니다.

참조용 으로 이 링크 를 따라 이전 기사로 이동하십시오. 언제나 그렇듯 제 글에 관심을 가져주시는 모습을 보니 기쁩니다.

두 번째 기사를 시작하기 전에 이전 기사에서 본 내용을 다음과 같이 요약해 보겠습니다.

바닐라 JavaScript로 간단한 앱을 만들었습니다.
앱에 react.js를 추가할 수 있었습니다.
react.js를 추가하는 과정에서 우리는 react.js가 단순히 함수 모음이라는 것을 배웠습니다.

이전 기사에서 만든 앱에 스타일을 추가할 것입니다.
우리는 react.js가 가상 DOM을 사용하는 이유와 작동 방식을 알게 될 것입니다.

let paragraph1 = React.createElement('p', {}, 'Hey there!');

let paragraph1 = React.createElement('p', {className: 'greetings'}, 'Hey there!');

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

const childParagraphOne = React.createElement('p',{},'Hello World!');
const childParagraphTwo = React.createElement('p',{},'Welcome to my website');

// property className is added to the second argument.
// I have removed the property id is now.
const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

.greetings {
    color: rgb(200, 159, 252);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="index.js" defer></script>
    <!-- link to css -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root">
    </div>
    <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>
</body>
</html>

우리의 응용 프로그램은 완전히 오류가 없습니까? 아니요! 그렇지 않습니다. 브라우저 콘솔을 열면 다음 오류가 표시됩니다.

이 오류를 제거하는 방법은 index.js를 다음과 같이 변경하는 것입니다(주석 확인).

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

// I have added the property key to each of the child paragraph elements.
// I have given unique values to the property key for each child
const childParagraphOne = React.createElement('p',{key: 'para1'},'Hello World!');
const childParagraphTwo = React.createElement('p',{key: 'para2'},'Welcome to my website');

const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

동일한 HTML 태그가 있는 세 개의 자식 요소가 있는 부모 컨테이너가 있고 이미 브라우저에서 렌더링되었다고 가정해 보겠습니다. 이제 동일한 HTML 태그가 있는 네 번째 하위 요소를 코드의 상위 컨테이너에 추가합니다.

React.createElement( ) 함수를 사용하여 뷰를 생성할 때 React 라이브러리 는 브라우저에서 DOM 트리를 직접 업데이트하지 않고 직접 업데이트할 가상 DOM 트리를 생성합니다. 브라우저에서 렌더링을 담당하는 ReactDOM 라이브러리는 고유한 키 속성을 가진 자식을 사용하여 새 자식(여기서는 네 번째 자식)이 도입된 경우 브라우저에서 부모 컨테이너의 모든 자식을 다시 렌더링할 필요가 없습니다. ReactDOM 라이브러리는 새 자식만 렌더링해야 하고 다른 자식은 이미 렌더링되었으며 브라우저의 DOM 트리에 있는 자식 요소의 키 속성 값과 가상 DOM 트리. 따라서 ReactDOM 라이브러리는 브라우저에서 필요한 변경 사항만 렌더링하도록 합니다. 이것은 React를 효율적으로 만듭니다.