4.1) React.js를 소개합니다.
- Meta(Facebook)이 개발한 오픈소스 Javascript 라이브러리
- 대규모의 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
React 기술적인 특징
- 컴포넌트를 기반으로 UI를 표현한다.
- 화면 업데이트 구현이 쉽다.
- 화면 업데이트가 빠르게 처리된다.
1. 컴포넌트 기반 UI 표현
컴포넌트(Component)
- 우리말로 "구성요소"라는 뜻
- 화면을 구성하는 요소, UI를 구성하는 요소를 말함
- 화면을 모듈화하여 레고를 조립하듯이 구성할 수 있다.
2. 화면 업데이트 구현이 쉽다
업데이트
- 사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용하는 것
선언형 프로그래밍 (<=> 명령형)
- 과정을 생략하고 목적만 간결히 명시하는 방법
명령형 프로그래밍
- 목적을 이루기 위한 모든 일력의 과정을 설명하는 방식
원리
- React는 각각의 컴포넌트에 State라는 현재의 상태를 저장하는 아주 특수한 변수를 저장할 수 있음
- 이 스테이트의 값이 바뀌면 컴퍼넌트가 바뀐 스테이트 값에 따라서 각각 다른 UI를 화면에 렌더링하도록 설정해줄 수 있음
렌더링(lendering) : UI 요소를 화면에 그려내는 것
- => 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것 만으로도 화면을 업데이트 시킬 수 있다.
3. 화면 업데이트가 빠르게 처리
선수지식 - 브라우저 렌더링
1. HTML과 CSS를 각각 DOM과 CSS Object Model로 변환
- DOM(Document Object Model) : 브라우저가 이해하기 쉬운 일종의 문서 객체 모델
- DOM과 CSS 오브젝트 모델을 합쳐서 렌더 트리를 만듦
- Render Tree : 웹 페이지의 청사진, 화면에 렌더링되어야 하는 요소들의 모든 정보가 다 포함
- DOM : HTML로 표현한 요소들의 위치나 배치 모양 등에 관한 정보
- CSS 오브젝트 모델 : CSS로 표현한 요소들의 스타일에 대한 모든 정보
- Layout
- 웹페이지라는 공간 안에 렌더트리에 포함되어 있는 요소의 배치를 잡는 작업
- Painting
- 실제로 화면에 그려내는 과정
선수지식 - 화면 업데이트 과정 (Virtual DOM)
- Layout, Painting은 매우 오래 걸리는 과정임 => 심한 경우 웹페이지 에러 발생
- Reflow : Layout을 다시 한다
- Repaint : Painting을 다시 한다
- 나쁜 예시 / 좋은 예시
- 아래 그림과 같은 업데이트 절차는 서비스의 규모가 커질 수록 점점 힘들어지며, 때문에 React는 이를 Virtual DOM을 통해 자동적으로 수행함
Virtual DOM
- DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판
- React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해본다.
- 연습 스윙, Buffer 같은 느낌
4.2) 첫 React App 생성하기
React App 생성하는 법
- React로 만든 서비스는 React App, Application이라고 불림
- React App 생성 원 절차
- Node.js 패키지 생성
- React 라이브러리 설치
- 기타 도구 설치 및 설정 -> 입문자에게 권장하기 어려움(강의 2시간 필요)
- Vite
- 차세대 프론트엔드 개발 툴
- 기본 설정이 적용된 React App 생성 가능
- React 공식 문서에서도 권장됨
React App 생성
생성
npm create vite@latest- 강의에서는 Package name을 안물어봤는데 나는 떴다
- 강의에서는 Package name을 안물어봤는데 나는 떴다
pakcage.json확인dependencies에서react버전이 18이하라면 재설치devDependencies: 개발할 때만 사용되는 라이브러리(문법 확인, 테스트 도구 등)
npm install
살펴보기
public 폴더
- 코드가 아닌 정적일 파일 저장
- SVG, JPG, PNG 등 이미지 파일
- 폰트, 동영상 등
src 폴더
- css, js 파일
App.jsx- 리액트에서 사용되는 특수한 확장자
- 일단은 리액트 코드가 작성되는 공간이라고 생각하면 된다.
assets
- 이미지나 폰트 등의 정적 파일을 보관할 수 있다.
- public과는 조금의 차이를 갖는다 (실습에서 천천히 알아봄)
.eslint.cjs (eslint.config.js)
- eslint 도구의 설정 파일
- ESLint : 개발자들 사이의 코드 스타일을 통일하는 데 도움을 주는 코드
- eslint 설정파일은 다양한 포맷을 가지며, 2020년 04월 06일 이후 ESLint 7.0.0 부터는 eslint.config.js가 공식 파일로 변경됨.
index.html
- 리액트 앱의 기본 틀 역할을 하는 HTML 코드가 담긴 파일
- Javascript 함수로 되어있는 컴포넌트를 index.html에 DOM을 수정해서 추가하는 방식으로 동작
vite.config.js
- vite의 도구의 옵션을 설정하는 파일
실행하기
npm run dev: 개발용으로 실행
4.3) React App 구동원리 살펴보기
npm run dev: React App 서버를 가동시켜라
- port 번호 : 어떤 서버에 접속할지 구분
- localhost : "우리집"
기본 화면
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);ReactDOM.createRoot(): 인수로 전달받은 HTML 요소를 리액트의 루트로, 즉 뿌리로 만들어주는 역할을 함.render( ... <App /> ...): App 컴포넌트를 렌더링하고 있다.
App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App- App.jsx 파일에 있는 app이라는 함수(컴포넌트)가 리턴하고 있는 HTML들을 main.jsx 파일에서 React의 루트 아래
render()메서드를 통해서 화면에 렌더링하도록 설정해뒀다.
기록용 공부용 개발 블로그