React 프로젝트의 중요한 파일 3가지
create-react-app 명령어를 통해 리액트 프로젝트를 생성했다면, 위와 같은 index.js 파일이 만들어졌을 것이다. 이 중에서 중요한 3가지 파일에 대하여 간단히 설명해보고자 한다.
- index.html
public 폴더에 있다. index.js에 대응되는 기본 HTML문서로, 웹페이지의 뼈대를 제공한다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링된 결과가 표시된다. (이름 변경 시 에러가 나므로 주의하자) - App.js
src 폴더에 있으며, 실제로 화면에 표시되는 내용들이 여기에서 정의된다. - index.js
src 폴더에 포함되어 있는 메인 프로그램이다. 여기에서 HTML 템플릿 및 컴포넌트를 조합하여 렌더링하고 실제로 화면에 표시한다. (특히 최상위 컴포넌트인 App.js를 렌더링한다)
index.js
React 어플리케이션의 진입점이라고 생각하면 된다. 프론트엔드의 시작지점!
index.html에 있는 root 요소에 리액트 컴포넌트를 삽입하는 역할을 한다.
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>
);
reportWebVitals();
코드를 자세히 뜯어보자.
import React from 'react';react 기능을 사용하기 위해 라이브러리 import
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));ReactDom : React에서 JavaScript와 다른 문법으로 작성된 코드를 변환 후 html 문서와 연결시켜주는 기능을 한다.
id가 root인 요소(index.html)에 React 컴포넌트를 렌더링해준다.
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);최상위 컴포넌트를 root 요소에 렌더링한다.
<React.StrictMode>개발 과정에서 생기는 잠재적인 문제를 감지하도록 지원해주는 도구이다.
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" />
<!--생략-->
<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>여기서 중요한 부분은
이 코드이다! (끝부분 쪽에 있음)
여기서의 div는 React 어플리케이션이 렌더링될 위치이다. 즉, React는 이 div 내부에 컴포넌트를 렌더링하여 화면을 구성하게 된다.
App.js
React 애플리케이션의 최상위 컴포넌트로, 화면에 렌더링될 UI를 정의한다.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;App.js에서는 React의 컴포넌트를 정의한다. (컴포넌트의 개념과 종류에 대해서는 추후 포스팅하도록 하겠다.)
html과 매우 유사한 문법이지만, 완전히 똑같지는 않으며, JSX라는 문법을 지켜야한다.
(ex. class가 아니라 className으로 써야 한다)
React의 동작 흐름
npm start를 하는 순간, index.js 안에 있는 코드가 실행되고, index.html이 로드된다.
index.html 코드에 있는 <div id="root"></div> 때문에 root가 index.js에서 선택된다.
index.js가 ReactDom.createRoot() 메서드를 통해 App.js의 컴포넌트들을 root에 렌더링한다.
(컴포넌트가 여러개인 경우 App.js (최상위 컴포넌트)가 먼저 돌아가고 이후 하위 컴포넌트가 호출된다.)
App.js가 실행되어 JSX 구조를 반환하며 최종적으로 index.html에 렌더링되며 화면에 표시된다.
정리하자면,
npm start → index.js → App.js → index.html에 렌더링 의 순서라고 보면 된다.
'Front-end > React' 카테고리의 다른 글
| [React] - 컴포넌트(Component란?) (0) | 2025.02.26 |
|---|---|
| [React] - package.json과 package-lock.json의 차이 (0) | 2025.02.24 |
| [React] - JSX란? (개념, 변환 과정, 주요 문법) (1) | 2025.02.23 |
| [React] - npm과 yarn의 차이 (1) | 2025.02.20 |
| [React] - npx create-react-app 설치 오류 해결방법 (0) | 2025.02.19 |
