React.js란?
Meta가 개발한 오픈소스 JavaScript 라이브러리
대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술
React의 기술적 특징
1. 컴포넌트를 기반으로 UI를 표현한다.
컴포넌트(Component) - 화면을 구성하는 요소, UI를 구성하는 요소를 말한다.
컴포넌트를 자바스크립트 파일로 모듈화할 수 있다는 것은 중복 코드를 제거하는 관점에서 매우 큰 장점
마크업: UI 구현
2. 화면 업데이트 구현이 쉽다.
리액트는 선언형 프로그래밍 방식으로 동작된다.
선언형 프로그래밍 방식이란? 불필요한 과정은 생략하고 내가 이루고자 하는 목적만 간결히 명시하는 방법
예시) 토마토 파스타를 만드는 과정은 난 잘 몰루~ 그냥 토마토 파스타 하나 주세요. 라고 말하는 것
←→ 명령형 프로그래밍(목적을 이루기 위한 일련의 과정을 설명하는 것, 예시: 요리과정 쭉 나열하는거)
컴포넌트에서 스테이트의 값이 바귀면 컴포넌트가 바뀐 스테이트 값에 따라서 각각 다른 UI를 화면에 렌더링하도록 설정해 줄 수 있다.
랜더링이란? 웹페이지 화면에 UI를 그려내는 것
리액트에서는 이렇게 C컴포넌트가 state 변수의 값에 따라 값이 1일때 1번 UI를 렌더링하도록 하고
만약 값이 2로 바뀌었을 때는 2번 UI를 렌더링하도록 설정할 수 있다.
화면에 업데이트가 필요할때 그냥 컴포넌트가 가지고 있는 state라는 변수의 값만 딱 바꾸면 자동으로 다른 버전으로 설정할 수 있다.
3. 화면 업데이트가 빠르게 처리된다.
Dom이란? 요소들의 위치, 배치, 모양에 관한 모양 정보
Render Tree란? 웹페이지의 청사진 또는 웹 페이지의 설계도
CSSOM(CSS Object Model)이란? 요소들의 스타일과 관련된 모든 정보
Layout이란? 요소의 배치를 잡는 작업
Painting이란? 실제로 화면에 그려내는 과정
🤔 그렇다면 화면에 업데이트는 어떻게 발생할까?
자바스크립트가 DOM을 수정하면 업데이트가 발생한다.
DOM을 수정되면 브라우저는 이 Critical Rendering Path의 전체 단계를 다시 진행시킨다.
랜더 트리를 다시 생성하고 레이아웃을 다시 잡고 페인팅을 다시 진행한다.
그러면 (화면에 그려지는) 렌더링 되는 요소가 변경되면서 업데이트가 실제로 이뤄진다.
⚠️ Layout, Painting은 매우 오래 걸리는 과정
Dom이 수정되어 레이아웃이 다시 진행되는 것을 Reflow라고 한다.
페인팅 과정이 다시 진행되는 걸 Repaint라고 한다.
자바스크립트로 Dom을 직접 수정해 업데이트를 구현할 때는 Dom 수정 횟수를 최소화해야된다.
위의 과정은 서비스의 규모가 커질 수록 힘들어진다.
하지만 React는 이 과정을 자동으로 해준다!
어떻게?
Virtual Dom을 통해서 말이다!!
Virtual Dom이란?
Dom을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판이라고 생각하면 된다.
React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영해본다.
ㄴ 연습 스윙 같은 느낌
첫 React App 생성하기
React Applicaton?
React로 만든 웹 서비스들은 보통 React App, React Application이라고 불린다.
1. Node.js 패키지 생성
2. React 라이브러리 설치
3. 기타 도구 설치 및 설정 → 대신 vite 이용
vite란? 차세대 프론트엔드 개발 툴, 기본 설정이 적용된 React App생성 가능
vite를 사용하기에
터미널에 npm create vite@latest를 입력해주고 파일 이름 작성하고 리액트와 자바스크립트를 선택해주면 된다.
리액트 웹이 자동설정되었다.
package.json을 살펴보자!
몇가지 라이브러리가 없기에 npm i를 입력해 주가로 설치해준다.
추가로 라이브러리가 설치되었다.
파일들을 살펴보자
public 폴더의 용도 - svg나 png, jpg같은 이미지 파일들을 보관하거나 정적인 파일(동영상, 폰트 등)을 보관하는 저장소
src - soucre의 약자다. 자바스크립트의 파일이 저장되어 있다. src파일안에 jsx 확장자가 있는데 리액트에서 사용되는 특수한 확장자(리액트 코드가 작성되는 공간)
eslint.cjs - 도구 설정 파일, 개발자들 사이에 코드 스타일을 통일하는데 도움을 준다.
.gitignore - git에 올리면 안되는 파일
index.html - 리액트 앱의 기본 틀
vite.config.js - vite라는 도구의 옵션 설정
터미널에 npm run dev를 누르면 화면이 실행된다.
React App 구동원리 살펴보기
이 주소는 어떻게 나온걸까?
vite안에 웹서버가 있다. npm run dev를 입력하면 React App 서버가 가동이 된다.
위의 메시지는 리액트 웹 서버의 가동이 시작되었다는 것을 의미한다. 메시지와 함께 출력된 주소는 현재 가동중인 주소를 의미(즉, 접속할 수 있는 주소)
localhost주소란? 내 컴퓨터주소를 의미
5173은 포트번호를 의미한다.
포트번호란? 하나의 컴퓨터 내에서 여러 대의 서버를 동작시키기 위해 필요한 주소
그렇다면 포트번호는 왜 필요할까? 🤔
하나의 pc에서 여러 개의 서버가 동작하고 있을 때 주소로만 요청을 받게 되면 어떤 서버가 이 요청에 응답해야 되는지 모호하기 때문에 이런 상황을 막기 위해 고유한 포트번호를 부여한다.
localhost:5173으로 접속 → 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>
사진에 있는 요소들은 index.html에서 script태그로 불러오는 main.jsx에 위치한 요소들이다. (동적으로 추가되는 요소들)
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
createRoot - 인수로 전달받은 HTML 요소를 리액트의 루트, 즉! 뿌리로 만들어주는 역할
인수로 전달하고 있는 요소는 document.getElementById는 루트로서
index.html파일안에 있는 루트를 아이디로 갖는 요소를 불러오고 있다.
index.html 안에 있는 <div id = "root"></div>가 main.jsx에 인수로써 전달되고 있다.
main.jsx에서 createRoot를 Reat의 루트로 변환해주고 있다.
그뒤 render를 호출해 (render-먼가를 렌더링하겠다) App을 렌더링하겠다. 즉, App컴퍼넌트를 렌더링하고 있다.
이때의 의문점!
<App/> 컴포넌트는 어디서 왔을까?
import App from './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://vite.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 Appfunction App이라고 App이라는 함수가 하나 있다. App함수는 HTML 태그들을 리턴하고 있다.
main.jsx파일은 index.html에서 <script>로 불러와 실행하고 있다.
'🔷 React' 카테고리의 다른 글
| [React] 카운터앱, State Lifting (0) | 2025.04.07 |
|---|---|
| [URECA] Day 48 HTML, CSS 레이아웃 복습 (0) | 2025.04.07 |
| [React] React.js 입문 (0) | 2025.04.05 |
| [React] Node.js 기초 (0) | 2025.04.01 |
