티스토리 뷰
리액트의 흐름
1. 리액트는 App.jsx 에 작성한 코드를 index.html 에 맞게 갈아끼우고, 이 html 파일을 클라이언트(브라우저)에 띄운다.
2. App.jsx 의 코드를 index.html 에 갈아끼우게 도와주는 파일이 main.jsx (혹은 index.js)
3. 리액트는 SPA 이어서 프로젝트에는 단 하나의 html 파일만 존재하는데, 그 파일이 index.html 임
* 나머지 폴더 설명
node_modules : 설치한 라이브러리가 들어있는 폴더 (라이브러리 := 모듈)
public : 이미지파일이나 데이터 파일 보관 폴더.
리액트 프로젝트를 빌드, 발행, 컴파일 등을 할 때 코드가 압축되는데 이 폴더에 있는 것은 압축되지 않음
App.css : App.jsx 랑 연결되는 css 파일
index.css : main.jsx 랑 연결되는 css 파일
package.json : 내가 설치한 라이브러리의 이름, 버전정보 등을 기록해주는 파일 (전체 프로젝트의 정보를 담고있는 파일)
"name"
: 현재 프로젝트 이름
"private"
: 내가 만든 프로젝트를 npm(node package manager)에 등록을 한다면, public 으로 쓸건지, private으로 쓸건지 나타내는 값. 디폴트는 true임 (public으로 쓰지 않겠다는 의미)
"script"
: 스크립트 명령어를 축약으로 쓸 수 있게 정의해둔 것.
터미널에 npm run dev 라고 치면 -> 스크립트에 정의된 dev에 따라 npm run vite 가 실행되는 것임
"dependencies"
: 리액트 앱을 운영환경에서 구동할 때 반드시 필요한 모듈들의 정보
각각의 모듈들도 기존의 다른 모듈들을 가져다 쓴 것이 많은데, 그러한 정보는 package-rock.json 에 있음.
프로젝트 생성 후 할 일
App.css, index.css
위 두개의 폴더에 기본으로 작성된 내용은 날린다.
그리고 index.css 파일에 아래와 같이 작성해두면 편하다.
body {margin :0;}
div {box-sizing:border-box;}
App.css 는 className 이 지정된 태그들의 css를 작성하는 곳이고,
index.css 는 기본 태그들의 css를 작성하는 곳인 것 같다.
리액트 프로젝트의 3가지 핵심 파일
리액트 프로젝트는 App.jsx 에 작성된 내용이 main.jsx 에 의해 index.html 로 표출된다.
즉, main.jsx가 실행됨에 따라 App.jsx가 index.html 로 갈아끼워지는 것이다.
다시 말하자면, 리액트 프로젝트를 실행하면 가장 먼저 실행되는 파일은 main.jsx이다.
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( document.getElementById('root') ).render () 의 내용을 해석해보자.
createRoot(document.getElementById('root')) : id="root"인 영역을 이 프로젝트의 루트로 만든 다음에,
.render() : 렌더링하겠다. 어떤내용으 렌더링 할거냐면
엄격모드(StrictMode)로 App.jsx 의 내용을
이라는 뜻이다.
* StrictMode 의 의미는 아직은 몰라도 된다고 함.
정리하자면,
id가 root인 영역을 이 프로젝트의 루트로 삼고,
그 영역 "안"에다가 App.jsx의 내용을 StrictMode로 렌더링하겠다. 라는 의미이다.
이때 말하는 id="root" 는 이따 살펴볼 index.html에 선언되어 있다.
main.jsx 내용 정리
1. App.jsx 에서 작성한 내용이 index.html 에 표출될 수 있게 도와주는 파일이 main.jsx
2. 상단에 import App from './App.jsx' 라고 선언되어 있음
3. id="root" 인 곳에 App.jsx 내용을 렌더링 하겠다는 내용의 파일임
4. 이 파일은 개발자가 수정하지 않는다.
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>
1. body 영역에 <div id="root"></div> 가 있다. 이 div 안에 App.jsx 에서 작성한 코드가 끼워진다.
2. 이 파일은 개발자가 수정하지 않는다.
App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
//App() 의 상단 영역에 변수, state 선언, 함수 작성하면 됨
//return의 소괄호 안에는 index.html 에 표출할 html을 작성하면 됨
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<Modal></Modal>
</div>
)
}
// Modal이라는 이름의 컴포넌트를 작성하였다.
function Modal(){
return (
<>
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>내용</p>
</div>
<div></div>
</>
)
}
export default App
1. App() 의 return 소괄호 안에 html 을 작성한다. 이곳에 작성한 내용이 index.html에 표출된다.
2. return 소괄호 안의 내용은 가장 바깥 영역에서 div 태그로 하나로 묶어줘야 한다.
의미없는 div 태그를 사용하기 싫으면 <></>로 묶어주면 된다.
3. Modal.jsx 라는 컴포넌트 파일을 따로 생성하지 않고,
App.jsx 하단에 function Modal() 로 컴포넌트를 작성할 수 있다.
동일한 파일 내에 존재하므로, 따로 import 없이 <Modal></Modal> 로 컴포넌트를 호출할 수 있다.
컴포넌트명은 무조건 대문자로 작성한다. 소문자로 작성할 경우 인식 안됨
4. function App() 또한 컴포넌트이다.
5. 맨 하단에 export default App 이라고 작성되어 있다. 컴포넌트 작성시 필수!
export default "컴포넌트명"
'프론트엔드 > React' 카테고리의 다른 글
| [React] 리액트 투두앱 todoApp 만들기 (0) | 2025.01.31 |
|---|---|
| [React] 리액트 state 개념과 동작원리, 일반 변수와 비교 (0) | 2025.01.26 |
| [React] 리액트 onClick 이벤트 작성법과 이벤트 방식 비교 (0) | 2025.01.26 |
| [React] 리액트 문법 : jsx, className, 컴포넌트, props (1) | 2025.01.24 |
| [React] node.js 사용하여 리액트 설치 및 프로젝트 환경설정 + SPA 설명 (0) | 2025.01.22 |