index.css와 App.css가 각각 어떻게 적용되는지 궁금해서 찾아보니
index.css는 index.html 스타일을 변경하고
App.css는 App.js의 요소들의 스타일을 변경한다는걸 알았다.
이때 App.js안에 있는 리액트의 컴포넌트가 로드되었을 때 App.css가 같이 로드된다.
그럼 여기서 index.html과 App.js가 어떻게 작동하여 우리 눈에 보이는지 알아보자.
React 어플리케이션을 실행할 때, index.html 파일은 웹 브라우저에서 먼저 로드되고, 이 HTML 파일 내부에서 JavaScript 파일(일반적으로 index.js로 명명)을 로드하여 React 어플리케이션을 시작한다.
index.js 파일은 React 애플리케이션의 시작점이다.
index.html 파일은 React 애플리케이션의 컴포넌트를 표시할 역할을 한다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html><div id="root"></div> 이 부분은 "root"라는 id를 가진 컴포넌트가 표시될 위치를 나타낸다.
App.js
React 애플리케이션의 주요 컴포넌트 중 하나이며 React 컴포넌트를 정의하는 역할을 한다.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>This is my React app.</p>
</div>
);
}
export default App;index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // App 컴포넌트를 불러옴
import './index.css'; // 스타일 시트를 불러옴
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root') // 'root' ID를 가진 div에 App 컴포넌트를 렌더링함
);ReactDom.render() 메서드를 사용하여 index.html 파일의 "root" div에 연결한다.
이렇게 기본 동작이 설정된다.
요약하면,
ReactDom.render() 메서드를 사용하여 App 컴포넌트를 "root" div에 렌더링 하면 'App.js'에 정의된 컴포넌트가 HTML DOM에 삽입되어 표시된다.
따라서 브라우저에서 보여지는 내용은 'App.js'에서 반환하는 컴포넌트에 따라 결정된다
