개발야옹 :: 개발야옹

DOM ( Document Object Model )

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

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

동적으로 웹 페이지를 변경하게 되면서 많은 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

flexbox

flexbox는 viewport( 웹페이지가 사용자에게 보여지는 영역 )나 요소의 크기가 불명확 또는 동적으로 변하는 경우 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

아래는 flexbox 사용 예시이다.

.flex-container{
	display : flex;
}

.flex-items{
	<!-- flex item에 대한 css 속성 설정 -->
    width : 50px;
    height : 50px;
}

display : flex 속성이 적용된 요소는 flex -container가 되고, flex-container의 자식 요소들은 flex-item이 된다.

flex item은 메인축에 따라 결정되는데 메인축의 방향은 flex-direction 속성으로 결정되며 기본값은 row이다.

flex-container 속성

1. flex-direction ( main axis )

- row ( 기본값 ) : 왼쪽 -> 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- column : 위 -> 아래

.flex_container{
    display : flex;
    flex-direction : column;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- row-reverse : 오른쪽 -> 왼쪽

.flex_container{
    display : flex;
    flex-direction : row-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- column-reverse : 아래 -> 위

.flex_container{
    display : flex;
    flex-direction : column-reverse;
    width : 100%;
    height : 50px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

결과에서 flex-item 2는 반정도만 보이고, flex-item3가 안보이는 이유는 flex-container의 height이 50px로, flex-item 3개의 크기보다 작기 때문에 더이상 보이지 않는다. height의 값을 더 크게 해주면 flex-item3까지 모두 보이는 것을 확인할 수 있다.

2. flex-wrap

위에서 본 flex-direction 예제에서는 flex-wrap값을 따로 지정해주지않아 기본값인 nowrap으로 설정되어서 flex-item이 flex-container의 크기를 벗어나 한줄에 배치가 되어 있는 것을 확인할 수 있다.

- nowrap ( 기본값 ) : flex-item이 부모요소인 flex-container를 벗어나더라도 한 줄에 배치

- wrap : flex-item이 부모요소인 flex-container를 벗어나면 여러 행에 걸쳐서 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- wrap-reverse : 여러행에 걸쳐 요소가 나열되는 순서가 시작점과 끝점이 반대로 되어 배치된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap-reverse;
    width : 100px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

3. justify-content

justify-content는 메인축 방향으로 item들의 정렬을 결정하는 속성이다.

- flex-start ( 기본값 ) : item들을 시작점으로 정렬 ( flex-direction 기준으로 )

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end : flex-item들을 끝점으로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-end;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center : item 들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : center;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-between : item들의 사이에 균일한 간격을 만들어준다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-between;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-around : item들의 둘레에 균일한 간격을 만들어줌

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-around;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-evenly : itme들 사이와 양 끝에 균일한 간격을 만들어 준다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : space-evenly;
    width : 200px;
    height : 100px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

4. align-items

align-itmes 속성은 cross-axis 항목의 정렬을 제어한다. cross-axis는 flex-direction 속성 값과 반대이다.

- normal ( stretch ) ( 기본값 ) : 아이템들이 수직축 방향으로 끝까지 늘어난다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center : item들을 가운데로 정렬

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-start : item들을 시작점으로 정렬한다. flex-direction이 row일 경우 위, column일 경우 왼쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end : item들을 끝점으로 정렬한다. flex-direction이 row일 경우 아래, column일 경우 오른쪽

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-items : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

5. align-content

flex-wrap 속성이 wrap으로 설정된 상태에서, item들의 행이 2 이상일 경우 수직축 방향 정렬을 결정하는 속성이다.

- stretch ( 기본값 )

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : stretch;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-start

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-start;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- flex-end

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : flex-end;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- center

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : center;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-between

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-between;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-around

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-around;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

- space-evenly

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
}

flex-item 속성

1. flex-basis

flex-basiss 속성은 flex-item의 기본 크기를 설정하는 속성이다.flex-direction이 row일 경우에는 너비의 기본 크기를 지정하고, flex-direction속성이 column일 경우에는 높이의 기본 크기를 지정한다.

기본 크기를 지정해주는것이기 때문에 원래 flex-item의 크기가 flex-basis로 지정한 값보다 작다면 flex-basis에 맞춰서 크기가 늘어나지만 flex-item의 크기 값이 flex-basis로 설정한 값보다 크다면 원래 item의 크기로 유지된다.

만약 모든item들의 크기를 하나로 고정하고 싶을 경우에는 그냥 width를 사용하여 속성을 설정해주면 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 200px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

2. flex-grow

flex-grow 속성은 flex-basis 속성으로 정해놓은 크기 값보다 커질 수 있는지를 결정하는 속성으로 flex-grow의 기본값은 0이다. flex-grow속성이 적용되어 있지 않거나 값이 0 인 경우에는 flex-container의 너비가 flex-item들의 너비의 합보다 크더라도 여백을 매워주지 않는다. 아래 예시 그림을 참고하면 더 쉽게 이해된다.

만약 flex-grow값을 1로 설정한 경우 아래 그림과 같이 위 그림에서는 남았던 container의 여백을 item들의 너비를 넓혀서 채우게 된다. 모든 item들에게 flex-grow : 1 속성을 줬기 때문에 모두 같은 크기로 여백을 채우게 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

flex-item5 에만 flex-grow 속성을 주게 되면 아래와 같은 결과가 나오게된다. 다른 flex-item 1,2,3,4의 크기는 flex-basis로 설정한 100px; 이 되고, flex-item5 의 경우 flex-grow 값을 1로 주었기 때문에 container의 여백을 혼자서 모두 채우게 너비가 커지게 된다. container 의 너비는 1000px, flex-item 1,2,3,4 는 각각 flex-basis가 100px 임으로 총 400px이기 때문에 flex-item5의 너비는 600px이 되게 된다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    align-content : space-evenly;
    width : 1000px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

.flex_item5{
    color : red;
    flex-grow : 1;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 100px;
}

3. flex-shrink

flex-shrink는 flex-grow와 반대로 flex-basis 속성으로 정해진 값보다 작아질 수 있는지를 결정하는 속성이다. flex-shrink 속성의 기본값은 flex-grow 속성과 다르게 기본값은 1 로, flex-basis보다 작아질 수 있다.

아래 예시를 보면 flex-item5에만 flex-shrink 속성 값을 0으로 주어 다른 flex-item1,2,3,4 와 달리 너비가 유연하게 줄어들지 않고 width : 100px 값그대로 고정되어 있는 것을 확인할 수 있다. 그와 반대로 flex-item 1,2,3,4의 경우 container 너비가 60px로, flex-basis 값보다 20px 작아져 그에 맞춰 너비가 줄어든 것을 확인할 수 있다.

.flex_container{
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    justify-content : flex-start;
    width : 60px;
    height : 200px;
    background-color: pink;
}

.flex_item{
    color : red;
    padding : 5px;
    border: 1px solid black;
    flex-basis : 80px;
    flex-shrink : 1;
}

.flex_item5{
    color : red;
    width : 100px;
    flex-shrink : 0;
    padding : 5px;
    border: 1px solid black;
}

출처 :

https://studiomeal.com/archives/197

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

https://d2.naver.com/helloworld/8540176

flex - CSS: Cascading Style Sheets | MDN

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.

developer.mozilla.org

728x90

'WEB > CSS' 카테고리의 다른 글

[SCSS] SCSS 문법 정리 (0)	2024.06.27
[ Web : CSS ] positon (0)	2022.07.27
[ Web - CSS media queries ] 반응형 웹 (0)	2021.11.17
[ Web - SCSS ] & Ampersand (0)	2021.11.16

#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

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

개발야옹

전체 글

[ React ] React 동작 원리( DOM, Virtual DOM)

DOM ( Document Object Model )

Virtual DOM ( Virtual Document Object Model )

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

[ React : CRA ] create-react-app ( CRA ) 시작

(1) CRA 시작하기

npm start

필요없는 파일 제거

index.js

App.js

index.html

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

[ Web : CSS ] flexbox

flexbox

flex-container 속성

1. flex-direction ( main axis )

2. flex-wrap

3. justify-content

4. align-items

5. align-content

flex-item 속성

1. flex-basis

2. flex-grow

3. flex-shrink

'WEB > CSS' 카테고리의 다른 글

[ React : Next.js ] Pages

#Pages

Pages with Dynamic Routes

Pre-rendering

Pre-redering vs Non-Pre-rendering

Static Generation without Data

Static Generation with Data

Server-side Rendering with Data

[ + ]

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

+ Recent posts

티스토리툴바