React 기본 파일(index.js, App.js, index.html)

React 기본 파일(index.js, App.js, index.html)

2023. 3. 10. 17:37ㆍ프레임워크(Framework)/React

create-react-app을 설치하였을 때 자동으로 설치되는 React의 파일 중

React의 중요한 파일 3가지

1. index.js
2. App.js
3. index.html

1. index.js

src 폴더의 하위폴더

메인 프로그램이라고 할 수 있다.

여기에서 html 템플릿 및 js의 컴포넌트를 조합하여 렌더링하고 실제 표시한다

2. App.js

src 폴더의 하위폴더

이것은 컴포넌트를 정의하는 프로그램이다.

실제로 화면에 표시되는 내용 등은 여기에서 정의된다.

3. 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} fromt 'react';

react에서 제공하는 Component Class를 상속받아 구현하기 위해 Compoenet를 import

class App extends Component {...}

Component 클래스를 상속하여 App 클래스를 생성하고 있다는 것을 알 수 있다.

이 Component라는 것이 컴포넌트의 기반이 되는 클래스이다.

이를 상속하여 컴포넌트로 작동하도록 한다.

render() {
return ...;
}

return 부분은 아래와 같다.

return (<div className = "App"> ... 생략 ... </div);

JSX 형태로 나타난다.

'프레임워크(Framework) > React' 카테고리의 다른 글

[애플스토어 클론 코딩/techit] (0)	2023.03.28
react-query (0)	2023.03.12
[React Query] 리액트 쿼리 시작하기 (useQuery) (0)	2023.03.06
React Hooks란? (0)	2023.03.05
Hooks (0)	2023.02.18

당니의 블로그