DOM ( Document Object Model )

DOM은 Document Object Model의 약자로 HTML, XML, 문서의 프로그래밍 interface로 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 

DOM은 구조화된 nodes, property, method를 갖고있는 tree형태의 objects로 문서를 표현한다. 

 

DOM

동적으로 웹 페이지를 변경하게 되면서 많은 CSS, JS 연산이 발생하게 되는데, 매번 이러한 변경이 발생할때마다 DOM을 새로 그려주게 되면 시간 소모가 많이 발생하게 된다. 결과물은 동일하게 유지하되 변경되는 DOM을 최소한으로 하여 시간을 단축하는 방법으로 React는 Virtual DOM이라는 개념을 도입하여 DOM 처리과정을 최적화시켰다.

 

Virtual DOM ( Virtual Document Object Model )

Virtual DOM은 Real DOM의 복사본과 같은 존재이다. Virtual DOM이 존재하는 이유는 Real DOM에는 Browser가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업 자체가 무겁기 때문이다.

 

Virtual DOM에는 원래 DOM에 존재하는 모든 객체에 대해 React Virtual DOM에 해당 객체가 존재한다. 그러나 document의 layout을 직접 변경할 수 있는 권한이 Virtual DOM에게는 없다. 

 

React에서 Virtual DOM을 이용하여 Real DOM을 처리하는데, Virtual DOM에서 상태가 변경되면, 해당 상태변화와 실제 변경된 부분을 확인하고, DOM API를 호출하여 Real DOM에 해당 변경된 부분을 반영하여 Rerendering해준다. 

 

 

 

 

 

출처 :

 

https://reactjs.org/docs/reconciliation.html

https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://www.geeksforgeeks.org/reactjs-virtual-dom/

http://www.tcpschool.com/javascript/js_dom_concept

https://buyandpray.tistory.com/79

728x90

'Framework\Library > React' 카테고리의 다른 글

[ React ] React Router #1  (0) 2022.02.09
[ React : CSS ] Component styling  (1) 2022.01.05
[ React : CRA ] create-react-app ( CRA ) 시작  (0) 2021.12.10
[ React : Next.js ] Pages  (0) 2021.11.23
[ React : Next.js ] _app.js  (0) 2021.11.23

(1) CRA 시작하기

npx create-react-app { app project name }

위 명령어를 terminal에 입력하면 아래와 같은 file들이 다운로드 되고, directory구조는 보이는 것과 같다.

npm start 

npm start

npm start 는 프로젝트를 시작하는 명령어이다. 

 

필요없는 파일 제거

필요없는 png, css, js 파일들을 모두 제거하고 src directory에는 index.js, App.js 파일만을 남겨둔다. 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App /> , document.getElementById('root')
);

 

App.js

function App() {
  return (
      <div className="App">
        Hello World!
      </div>
  );
}

export default App;

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      
    </div>

  </body>
</html>

 

=> App.js 에서 작성한 내용인 [ <div className="App">Hello World!</div> ] 는 index.js에 의해서 index.html의 id가 root엔 div tag안에 들어가게 된다. 

index.js의 [ <App />, document.getElementById('root') ] 가 이 역할을 한다. 

 

728x90

'Framework\Library > React' 카테고리의 다른 글

[ React : CSS ] Component styling  (1) 2022.01.05
[ React ] React 동작 원리( DOM, Virtual DOM)  (4) 2021.12.10
[ React : Next.js ] Pages  (0) 2021.11.23
[ React : Next.js ] _app.js  (0) 2021.11.23
[ React ] Next.js : React Framework + <Link>, CSN  (0) 2021.11.23

#Pages

Pages with Dynamic Routes

Next.js는 동적 경로가 있는 page 지원.

ex) 'pages/posts/[id].js' => '/posts/1', '/posts/2' 등으로 액세스 가능.

 

Pre-rendering

Next.js 는 기본적으로 모든 page를 pre-rendering한다.

Pre-rendering은 아래 두 가지의 종류가 있는데 두 방식의 차이점은 페이지에 대한 HTML을 생성하는 것이 다르다.

 

1. Static Generation ( Recommended )

    - 빌드시 html이 생성되며 각 요청에서 재사용된다.

2. Server Side Rendering ( SSR )

    - 각 요청에 대해 html이 생성된다. 

 

Next.js 는 사용할 Pre-rendering 방식을 선택할 수 있다. 

 

Pre-redering vs Non-Pre-rendering

Pre-rendering

 

Non-Pre-rendering

 

Static Generation without Data

Static Generation with Data

'getStaticProps'

    - getStaticProps 는 production build시 실행되고, 함수 내에서 외부 데이터를 가져와 page의 Component로 보낼 수 있다. 

 

 

Server-side Rendering with Data

'getServerSideProps'

 

[ + ] 

meta data 구문 분석 library => gray-matter  

npm install gray-matter

https://nextjs.org/learn/basics/data-fetching/pre-rendering

 

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

 

[ + ] 다음에 읽어볼뤠 ( SWR )

https://nextjs.org/learn/basics/data-fetching/request-time

728x90

'Framework\Library > React' 카테고리의 다른 글

[ React ] React 동작 원리( DOM, Virtual DOM)  (4) 2021.12.10
[ React : CRA ] create-react-app ( CRA ) 시작  (0) 2021.12.10
[ React : Next.js ] _app.js  (0) 2021.11.23
[ React ] Next.js : React Framework + <Link>, CSN  (0) 2021.11.23
[ React ] React Framework  (0) 2021.11.23

_app.js

export default function App({Component, pageProps}){
	return <Component {...pageProps}/>;
}
export default App;

- _app.js에서 rendering하는 값은 모든 page에 영향을 준다. 때문에 전역 css를 적용하거나 할 때 사용된다.

- 내부에 Component가 있으면 전부 실행하고 html의 body로 구성된다. 

- Component와 pageProps를 받는데, 이 때 props로 받은 Component는 요청한 page이다. 

- GET/ 요청을 보냈다면, Component에는 /pages/index.js file이 props로 오게되고, pageProps는 page getInitialProps를 통해 내려 받은 props들을 말한다. 그 다음 _document.tsx가 실행된다. 

 

! global CSS file은 오직 pages/_app.js에서만 import 할 수 있다. 

 

[ + ] 

getInitialProps 는 다음에 알아봐야지.

 

 

 

https://nextjs.org/learn/basics/assets-metadata-css/global-styles

https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx

728x90

'Framework\Library > React' 카테고리의 다른 글

[ React : CRA ] create-react-app ( CRA ) 시작  (0) 2021.12.10
[ React : Next.js ] Pages  (0) 2021.11.23
[ React ] Next.js : React Framework + <Link>, CSN  (0) 2021.11.23
[ React ] React Framework  (0) 2021.11.23
[ React ] Hook - state  (0) 2021.11.22

+ Recent posts

티스토리툴바