2022.05.24 - React CSR / SSR, cdn 사용해보기
- Component 란? 내가 지은 이름로 정한 어트리뷰트를 설정해서 표현할 수 있는 구성을 말한다.
버전이라는 전체 타이틀 안에 컨텐트, 컨텐트 안에 카드 등 설정할 수 있음.
- Virtual DOM?
DOM을 직접 제어하는 경우 바뀐 부분만 정확히 바꿔줬어야 했으나, 리액트의 Virtual DOM 을 이용하면 가상의 돔 트리를 사용해서,
이전 상태와 이후 상태를 비교하여 리액트가 찾아내서 자동으로 바꾼다.
diff를 먼저 찾아내고 그 diff로 Rerender를 한다.
- CSR (Client Side Rendering)
html->화면의 dom 요소나 스타일링이 적용되어 보여진다
리액트는 자바스크립트로 이루어진 하나의 커다란 웹애플리케이션이며, 자바스크립트가 전체가 다운로드되어야지 실행이 가능함.
[ 과정 ]
1. 빈 껍데기의 html
2. 경로로서 js 요청
3. 리액트 전체가 담겨 있는 js를 다운받고
4. 다운 후 스크립트가 브라우저에 로드되고 실행됨
5. 실행 후 리액트가 실행됨 (화면이 보여지지않음)
6. 리액트 컴포넌트들이 화면에 그려지고, 화면이 보이고, 그때부터 유저는 인터랙션할 수 있음
- SSR( Server Side Rendering)
1. 최초에 이미 html로 표현되어있는 html을 다운받게됨
2. html 다 다운로드되고 그 안에있는 js를 다시 요청 (html 구성요소가 랜더되고 있으므로 화면이 보일 것 / 동작은 되지않음)
3. 보는 중 js가 다운됨
4. 소스코드를 실행하면 리액트가 실행됨
5. 리액트앱이 실행된 후 js를 통해 컴포넌트가 html에 보여지는 순간부터 유저는 동작할 수 있게됨
<차이점>
사실상 동작의 차이는 없음 (둘 다 리액트가 실행된 후)
html이 다운된 후 리액트가 실행되기 전까지 SSR은 찰나에 유저가 볼 수 있다는것이 차이점
[ 리액트 사용 기초 ]
1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';2. 리액트 컴포넌트 만들기
import React from 'react';3. 컴포넌트 뜯어보기
ReactDOM.render : HTMLElement로 연결해주는 함수
import react를 해서 컴포넌트를 만들게 된다.
4. CDN링크를 통해 리액트 라이브러리를 사용한다.
https://ko.reactjs.org/docs/cdn-links.html
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
5. 라이브러리를 사용할 폴더 생성
1) mkdir what-is-react
2) cd what-is-react
3) npm init -y
===>y 설치
4) 폴더를 파일서버처럼 사용할 수 있는 명령
npx serve
5) localhost 접속
6) cdn <head>에 넣어주기
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>