Create-react-app으로 프로젝트 생성하기
create-react-app은 리액트 프로젝트를 생성할 대 필요한 Webpack, Babel의 설치 및 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구이다.
React 프로젝트를 만드는 방법
터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어를 실행한다.
// yarn 사용
$ yarn create react-app hello-react
$ cd hello-react
$ yarn start
// npm 사용
$ npm init react-app hello-react
$ cd hello-react
$ npm start
명령어를 입력 후, 브라우저에 자동으로 리액트 페이지가 생성된다.
1. React의 디렉터리 구조
- node_modules : npm install을 하여 설치된 모듈들이 위치하는 폴더
- public: static 자원 폴더, 정적 파일들을 위한 폴더
- src: React를 작업할 폴더
1) public 폴더
favicon.icon
웹사이트의 상단에 위치하는 ‘파비콘’ 이미지이다.
index.html
가상 DOM을 위한 html 파일이다. (빈 껍데기 파일)
메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다.
이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링된 결과가 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
manifest.json
앱 스토어없이 기기의 홈 화면에 설치할 수 있는 웹 사이트이다.
2) src폴더
index.js
index.html과 비슷하게 메인 파일로, 여기서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
ReactDom.render() 안에 보여주고 싶은 component를 넣는다.
ReactDom.render() 란?
ReactDom.render(element, container[, callback])
컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.
첫 번째 파라미터에는 페이지에 렌더링할 내용을 jsx 형태로 작성하고,
두 번째 파라미터에는 해당 jsx를 렌더링 할 document 내부 요소를 설정한다.
index.html 파일을 보면 id가 root인 요소 안에 렌더링 하도록 설정되어 있다.
index.html에서 아래 코드와 같이 ‘root’를 명시했기 때문에 사용할 수 있다.
<div id="root"></div>
App.js
컴포넌트를 정의하는 작업 파일로, 실제로 화면에 표시되는 내용 등은 여기서 정의된다.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;App.css
App.js에 대한 css파일이다.
'FrontEnd > React.js' 카테고리의 다른 글
| class 사용하기 (0) | 2022.06.26 |
|---|---|
| 전개 연산자 사용하기 (0) | 2022.06.26 |
| React의 생명주기-변경 (0) | 2022.06.23 |
| React의 생명주기-생성 (0) | 2022.06.23 |
| React.js (0) | 2022.06.22 |
