아래내용은 이 분의 블로그에서 참조한 내용이 많다.
React의 중요한 파일 3가지
- index.js
- App.js
- index.html
-
index.js
src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다. -
App.js
src 폴더에 있다. 이것은 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다. -
index.html
public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. (index.html 이름을 바꿀시 오류발생)
index.js
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')
);
// 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();외부의 모듈을 로드하는
import
최초에 "react", "react-dom"라는 모듈을 로드하고 있고, 이것들이 React의 본체이다.
ReactDOM.render(첫번째인수, 두번째인수)
첫번째 인수는 App.js으로 정의하고 있는 App 컴포넌트를 지정하고 있다. 그리고 두번째 인수는 root라는 ID의 요소를 지정
● App 컴포넌트가 root 태그에 포함된 코드가 렌더링되고 출력
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>App.js
import React, { Component } from 'react';
react에서 제공하는 Component Class를 상속받아 구현하기 위해 Component를 import
class App extends Component {...}
Component 클래스를 상속하여 App 클래스를 생성하고 있다는 것을 알 수 있다.
이 Component라는 것이 컴포넌트의 기반이 되는 클래스이다.
이를 상속하여 컴포넌트로 작동하도록 한다.
render () {
return ...;
}
return부분은 아래와 같다.
return (<div className = "App"> ... 생략 ... </ div);
JSX 형태로 나타난다.
