React App을 만드는 방법
React.js
Node 기반 javascript UI 라이브러리
webpack
다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
Babel
javascript 컴파일러, JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
React app을 만들기 위해서는 추가적인 라이브러리들이 필요합니다. 이것들을 다 설정하기에는 많은 시간이 걸리기 때문에 지금은 미리 세팅 완료된 패키지 (Boiler plate)를 사용하여 React app을 만들어 보도록 하겠습니다.
vscode를 열고 원하는 폴더에 터미널을 열어 명령어를 작성해봅니다.
$ npx create-react-app <package-name>
$ npx create-react-app reactexam1npx는 npm 레지스트리에 올라가 있는 패키지를 쉽게 설치하고 관리할 수 있게 도와주는 CLI 도구입니다.
만약 npx -v가 존재하지 않다면 아래 명령어를 사용합니다.
$ npm i -g npx
설치가 완료되었다는 것과 npm을 업데이트 하라는 문구가 있군요 ㅋㅋㅋ
만약 설치가 실패했다면 node.js의 버전 문제일 경우가 크기 때문에 LTS 버전이나 최신 버전으로 업데이트 하시기 바랍니다.
package.json
{
"name": "reactexam1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}package.json을 보게 되면 testing-library, react, react-dom 등 여러 패키지들이 자동으로 설치 된것을 확인할 수 있습니다.
react app start
$ npm start해당 명령어를 사용하여 react app을 실행할 수 있습니다.
3000번 포트로 실행이 잘 된 것을 확인할 수 있습니다.
src/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.js가 현재 보이는 페이지인 것을 확인할 수 있습니다.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();index.js를 보게 되면 ReactDom으로 id가 root인 태그에 App을 import 하여 해당 root 태그 안에 app을 넣어 렌더링 한다는 것을 알 수 있습니다.
개발자 도구를 열어 페이지를 보게 되면 <div id='root'> 안에 <div class='App'>이 들어가 있는 것을 확인할 수 있습니다.
그럼 root는 어디있을까요?
public/index.html
<!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" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>public/index.html을 열어보게 되면 id='root' div를 확인할 수 있습니다.
정리
react app이 실행 되면서 src/index.js가 실행이 되면서 public/index.html 안에 있는 id가 root인 div 태그 안으로 src/app.js 안에 있는 app 함수가 리턴하는 값들이 들어간다. 라고 이해하시면 됩니다.
다른 파일들도 확인해보도록 하겠습니다.
node_modules
node.js 패키지의 구성요소 중 하나로 외부 모듈을 저장하고 있는 폴더입니다. react도 외부 모듈이기 때문에 node_modules 안에 포함되어 있습니다. 정말 많은 node module들을 가지고 있는 것을 확인 할 수 있습니다.
이렇게 많은 모듈들을 직접 설치 할 수 없기 때문에 create-react-app 명령어를 사용하여 자동으로 설치를 했습니다. node_modules는 굉장히 크기가 크기 때문에 git 이나 해당 프로젝트를 외부로 보낼 때 node_modules를 제외하고 보냅니다.
그 이유는 어떤 node moudes를 가지고 있었는지, 어떤 버전이었는지의 정보가 package.json과 package-lock.json에 가지고 있기 때문입니다. 만약 node_modules가 없는 리액트 프로젝트르 받았다면 아래의 명령어로 node modules를 다운 받을 수 있습니다.
$ npm ipublic
- favicon.ico : 홈페이지의 아이콘
- logo192.png, logo512.png, manifest.json : 모바일로 웹 브라우저로 웹을 볼 때 아이콘, 옵션을 설정합니다.
- robots.txt : google, naver가 웹 사이트를 수집해 갑니다. 수집을 허용, 막는 설정을 작성하는 파일입니다.
src
대부분 js와 css 파일들이 있습니다. 소스파일들이 들어있는 폴더 입니다.
다시 App.js 파일을 보도록 하겠습니다.
import logo from './logo.svg';
import './App.css';
function App() {
let name = 'jay';
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js {name}</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 function 안에는 현재 js 문법과 html 형식이 같이 사용되는 것을 볼 수 있습니다. 이것을 JSX 문법이라고 합니다.
또 아래 export default App을 사용하여 외부에서 컴포넌트로써 사용 가능하게 한다는 것을 알 수 있습니다. 이것을 es module system이라고 합니다. 간단하게 export default 로 내보낸 컴포넌트를 외부에서는 import 문법을 사용하여 컴포넌트를 사용할 수 있게 되는 것 입니다.
import App from './App';
// ... 생략
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);주의할 점은 export default는 한개만 내보낼 수 있습니다. 결론적으로 react는 es module system을 사용하여 컴포넌트를 내보니고 사용할 수 있습니다. 하지만 commonjs module system도 사용을 해야할 경우가 더러 있다는 점도 알아야 합니다.
해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.
