React의 디렉토리 구조
node_modules : npm install을 하여 설치된 모듈들이 위치하는 폴더
public : static 자원 폴더, 정적 파일들을 위한 폴더
src : 리액트를 작업할 폴더
public 폴더
favicon.icon
웹사이트의 상단에 위치하는 '파비콘' 이미지
index.html
가상 DOM을 위한 html 파일
메인 프로그램인 index.js에 대응되는 것으로 HTML 템플릿 파일
이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어나서 렌더링된 결과가 표시
manifest.json
앱스토어 없이 기기의 홈화면에 설치할 수 있는 웹사이트
src 폴더
index.js
index.html과 비슷하게 메인 파일로, 여기서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시
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();ReactDom.render() 안에 보여주고 싶은 component를 넣는다.
ReactDom.render() 이란?
ReactDom.render(element, container[, callback])컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.
첫번째 파라미터에는 페이지에 렌더링할 내용을 jsx 형태로 작성
두번째 파라미터에는 해당 jsx를 렌더링 할 document 내부 요소를 설정
index.html 파일을 보면 id가 root인 요소 안에는 렌더링 하도록 설정
<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>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.css
App.js에 대한 CSS파일
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}참고 사이트
https://velog.io/@97godo/React-React-%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0
[React] React 의 기본 구조
본 글은 React의 기본 구조에 대해 포스팅하였습니다. React의 디렉토리 구조, public 폴더, src 폴더 안에 포함되어 있는 파일에 대해 정리하였습니다.
velog.io
'프로그래밍 > react' 카테고리의 다른 글
| [react] State (0) | 2023.05.16 |
|---|---|
| [react] Components와 Props (0) | 2023.05.16 |
| [react] Hook (0) | 2023.05.15 |
| [react] Lifecycle(생명주기) (0) | 2023.05.14 |
| [react] react-router-dom (0) | 2023.05.13 |