패스트캠퍼스 한 번에 끝내는 프론트엔드 개발(Online) 강의 정리
Ch1. React Getting Started
리액트 시작하기
1. React Concept
리액트 개념
Keyword
- Angular vs React vs Vue (npm trends)
View를 다루는 라이브러리- Only Rendering & Update
ㄴ NOT included another functionality (ex. http client, ...) Component Based Development
ㄴ 독립적인 코드 블럭 (HTML + CSS + JavaScript)
ㄴ 작업의 단위- Virtual DOM : 이제는 DOM을 직접 다루지 않음
- JSX
ㄴ NOT Templates
ㄴ transpile to JS (Babel, TypeScript) - CSR & SSR
Component란?
컴포넌트 알기
<!-- HTML Element -->
<img src="이미지 주소" />
<button class="클래스 이름">버튼</button>
<!-- 내가 만든 컴포넌트 -->
<내가지은컴포넌트이름1 name="Mark" />
<내가지은컴포넌트이름2 prop={false}>내용</내가지은컴포넌트이름2>- src, class, name, props 밖에서 넣어주는 데이터
- 문서(HTML), 스타일(CSS), 동작(JS)를 합쳐서 내가 만든 일종의 태그
Component Tree => (converted to) => DOM Tree
Why Virtual DOM?
왜 가상 DOM인가?
DOM을 직접 제어하는 경우
- 바뀐 부분만 정확히 바꿔야 한다.
DOM을 직접 제어하지 않는 경우
- 가상의 돔 트리를 사용해서,
- 이전 상태와 이후 상태를 비교하여,
- 바뀐 부분을 찾아내서 자동으로 바꾼다.
Virtual DOM =>
(state change > compute diff > re-render)
=> Browser DOM
React : Client Side Rendering
CSR (Client Side Rendering)
Server Sending Response to Browser
-> Browser Downloads JS
-> Browser executes React
-> Page Now Viewalbe and Interactable
SSR (Server Side Rendering)
Server Sending Ready to be rendered HTML Response to Browser
-> Browser Renders the page. Now Viewalbe. and Browser Downloads JS
-> Browser executes React
-> Page Now Interactable
CSR vs SSR
| CSR | SSR |
|---|---|
| JS가 전부 다운로드 되어 리액트 애플리캐이션이 정상 실행되기 전까지는 화면이 보이지 않음 | JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음 |
| JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터랙션 가능 | JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능. |
2. 개발환경 체크하기
- Node.js (Installer, nvm)
- Browse
- Git
- VSCode
3. 리액트 라이브러리
리액트 핵심 모듈 2개로 리액트가 하는 일 알아보기
// 1. 리액트 컴포넌트 => HTMLElement 연결하기
import ReactDOM from 'react-dom';
// 2. 리액트 컴포넌트 만들기
import React from 'react';
{React 컴포넌트} JS,JSX ----> HTML Element
ReactDOM.render(
<HelloMessage name="Taylor" />
document.getElementById('hello-example')
);
class HelloMessage extends React.Component {
render() {
return (
<div>Hello {this.props.name}</div>
);
}
}{React 컴포넌트} 만들기
-
리액트 컴포넌트를 만들 때 사용하는 API 모음
https://reactjs.org/docs/react-api.html
https://ko.reactjs.org/docs/react-api.html -
Use React, ReactDOM Library with CDN
(CDN을 통한 리액트 라이브러리 사용)
https://reactjs.org/docs/cdn-links.html
https://ko.reactjs.org/docs/cdn-links.html
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
작업 방식 비교
고전 프론트엔드
HTML로 문서 구조를 잡고, CSS로 스타일을 입히고, JavaScript로 DOM을 조작하는 방식
<script type="text/javascript">
const root = document.querySelector('#root');
const btn_plus = document.querySelector('#btn_plus');
let i = 0;
root.innerHTML = "<p>init : 0</p>"
btn_plus.addEventListner("click", () => {
root.innerHTML = `<p>init : ${i++}</p>`;
});
</script>컴포넌트를 활용한 프론트엔드
컴포넌트를 정의하고, 실제 DOM에 컴포넌트를 그려준다.
<script type="text/javascript">
const component = {
message: 'init',
count: 0,
render() {
return `<p>${this.message} : ${this.count}</p>`;
}
};
function render(rootElement, component) {
rootElement.innerHTML = component.render();
}
//초기화
render(document.querySelector('#root'), componet);
document.querySelector('#btn_plus').addEventListner('click', () => {
component.message = 'update';
component.count = component.count + 1;
render(document.querySelector('#root'), component);
});
</script>컴포넌트 안에는 데이터가 들어있다
데이터이 바뀌면 상태값에 의해 리렌더
브라우저 지원
- 리액트는 IE9와 상위 버전을 포함한 모든 주요 브라우저를 지원
- 그러나 IE9와 IE10같은 구형 브라우저는 폴리필(polyfill)이 필요 (ES5 메서드를 지원하지 않는)
