[React] CSR vs SSR 차이는?

 

Component

이미 내장되어 있는 태그를 조합하고, 거기에 스타일, 동작까지 입혀서 (문서,스타일,동작,표현)을 한꺼번에 만들고 재활용하는 방식

<내가지은이름 name ="Mark" />
<내가지은이름 props={false}>내용</내가지은이름>

// src,class,name,props 밖에서 넣어주는 데이터
// 문서(HTML), 스타일(css), 동작(JS) 를 합쳐서 내가 만든 일종의 태그

 

Why Virtual DOM ?

• DOM을 직접 제어하는 경우
  • 바뀐 부분만 정확히 바꿔야 한다.
• DOM 을 직접 제어하지 않는 경우
  • 가상의 돔 트리를 사용해서,
  • 이전 상태와 이후 상태를 비교하여,
  • 바뀐 부분을 찾아내서 자동으로 바꾼다. - diff 찾아내 rerender

 

CSR : React Client Side Rendering

Html → JS → React → Component rendering

 

• JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음.
• JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터랙션 가능

SSR : React Server Side Rendering

Html → JS → React → Component Rendering

 

 

• JS 가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음
• JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능

 

리액트가 하는 일

리액트의 핵심 모듈 2개

//1. 리액트 컴포넌트 => HTMLElement 연결하기 
import ReactDOM from 'react-dom';

//2. 리액트 컴포넌트 만들기 
import React from 'react';

ReactDOM.render(
	<HelloMessga name="Taylor" />,
	
	document.getElementById("hello-example")
)

class HelloMEssage extends React.Component {
	render(){
		return (
			<div> 
				Hello {this.props,name}
			</div>
		);
	}
}