01. React App
- 리액트로 만든 웹 서비스
- 웹 페이지의 기능을 넘어서 어플리케이션에 가까운 기능을 해서 웹 위에 동작하는 어플리케이션이라는 의미
02. React App 생성
- Vite : 차세대 프론트엔드 개발 툴로, 기본 설정이 적용된 React App 생성 가능
- vite에는 웹 서버가 내장되어 있음
01) React App 생성
npm create vite@latest
📑 package.json
- node.js 패키지이기 때문에 package.json 파일이 있음
{
"name": "practice-react",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.4"
}
}- devDependencies : 개발할 때에만 사용되는 라이브러리들 저장, 배포할 때는 포함되지 않음
02) package.json을 기반으로 라이브러리 설치
npm i
- 설치가 완료되면 node_modules, package-lock.json 파일 생성됨
03. React App 파일 구성
① 📑 public
- svg, png, jpg 등과 같은 이미지 파일 보관
- 폰트나 동영상 같은 정적인 파일 보관
② 📑 src
- 작성하게 될 리액트나 자바스크립트 코드들 보관
③ 📑 assets
- 정적 파일 보관
④ 📑 eslintrc.cjs
- eslint 도구의 설정 파일
(eslint : 개발자들 사이에 코드 스타일을 통일하는 데 도움을 주는 도구)
⑤ 📑 .gitignore
- github에 업로드할 때 올리면 안 되는 파일 명시하는 파일
⑥ 📑 index.html
- 리액트의 기본적인 틀 역할을 하는 HTMl 코드가 담긴 파일
⑦ 📑 vite.config.js
- vite 도구의 옵션을 설정하는 파일
04. React App 실행
📑 package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
}
}- dev : 개발용으로 실행
📑 ctrl+J 누른 후 terminal에 'npm run dev' 입력
npm run dev- 리액트 웹 서버 가동
[ 단축키 ]
- r + enter : 새로고침
- u + enter : url 다시 보기
- o + enter : 브라우저 다시 열기
- c + enter : 콘솔 지우기
- q + enter : 리액트 앱 종료
📌 localhost:5173
- localhost : 내 컴퓨터를 뜻함, 남의 컴퓨터로 이 주소에 접속할 수 없음
- 5173 : 포트 번호로, 하나의 컴퓨터 내에서 여러 개의 서버를 동작시키기 위해 필요한 주소를 말함
- 포트 번호가 필요한 이유 : 예를 들어 React Server, PHP Server 두 개의 서버가 동작하고 있을 때 어떠한 서버가 요청에 응답할지 명시해주기 위함
- 그래서 모든 프로그램이 실행될 때마다 자동으로 고유한 포트 번호를 붙여줌
05. React App 구동 원리
📑 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 파일 실행
📑 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>,
)- createRoot : 인수로 전달받은 html 요소를 리액트의 루트로 만들어주는 역할
- render : <App />을 렌더링 한다는 뜻
- <App /> : 컴포넌트를 렌더링하는 문법
- StrictMode : 작성한 코드에 잠재적인 문제가 있는지 검사해서 경고해주는 도구
📑 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- 함수가 html 태그들을 리턴하고 있으면 함수를 컴포넌트라고 부름
- App() 함수가 리턴하고 있는 html 태그들을 main.jsx에서 사용
📌정리
'app.jsx'에서 html 태그 리턴 → 'main.jsx'에서 <App /> 실행 → 'index.html'에서 main.jsx 실행
참고자료
이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'
댓글