public 디렉토리에는 웹브라우저에 보이는 html파일, img 등 정적 파일을 주로 담는다.
1) index.html
index.html 파일 내부를 보면, <body></body>내부에 id가 root인 <div>태그가 존재한다. 리액트를 통해 만든 컴포넌트들은 id가 root인 div안에 들어가도록 지정해둔 것이다.
index.html은 가상 DOM을 위한 HTML 파일로 메인 프로그램인 index.js에 대응되는 파일이다. index.js에 의해 일어나 렌더링된 결과가 표시된다.
※ 이름이 수정되면 안되는 파일들 ※
public/index.html : 페이지 탬플릿
src/index.js : 자바스크립트 시작점
3. src
: 대부분의 리액트 소스 코드들이 작성
: src 폴더 안에는 JS 파일과 CSS파일들을 넣은면 된다.
: Webpack은 여기에 있는 파일만 보고 이 폴더 이외에 넣는 것은 Webpack에 의해 처리되지 않는다.
: src 폴더 안에 있는 파일들만 번들러가 작동한다.
1) App.js
컴포넌트를 정의하는 프로그램.
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>App</h1>
</div>
);
}
export default App;
App.js에서 return()부분은 JSX를 사용해 html파일 내부 형태와 비슷하게 작성된다.
export default App;
export default는 변수, 함수, 오브젝트, 클래스 등을 전달하는 명령어이다. export default를 붙이면 중괄호 없이 변수, 함수 등을 import 할 수 있다.
export default는 다른 파일에서도 해당 파일을 사용하기 위해 적어줘야 한다.
2) index.js
메인 프로그램으로, HTML 템플릿 및 자바 스크립트의 컴포넌트르 조합하여 렌더링하고 표시
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
import App from "./App";으로 App.js의 컴포넌트를 가져온다.
public/index.html에서 root를 찾아<App />를 집어 넣는다.
4. .gitignore
: 프로젝트에 항상 필요. git에 올리지 않는 것들을 .gitignore 파일에 목록화
5. package-lock.json
: npm을 사용하여 node_modules 이나 package.json 파일을 실행하게 되면 자동으로 생성되는 파일( npm install을 하여 node_modules나 package.json이 업데이트 되면, package.json과 똑같지만 좀 더 정확한 정보를 가지고 자동 생성)
6. package.json
: 해당 프로젝트에 대한 정보들이 들어있다.(프로젝트 이름, 버전, 필요한 라이브러리, 라이브러리의 버전등)
: 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 테스트 할 때 사용할 스크립트 등이 명시
필요한 라이브라리와 라이브러리의 버전들이 명시
리액트 앱 실행, 빌드, 테스트 등의 스크립트가 명시.
프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능하다.
[React JS] 기본 구조와 구성 파일
1. node_modules
node_modules 폴더에는 node.js에서 사용할 수 있는 모듈이 들어있다.
2. public 디렉토리
public 디렉토리에는 웹브라우저에 보이는 html파일, img 등 정적 파일을 주로 담는다.
1) index.html
index.html 파일 내부를 보면, <body></body>내부에 id가 root인 <div>태그가 존재한다. 리액트를 통해 만든 컴포넌트들은 id가 root인 div안에 들어가도록 지정해둔 것이다.
index.html은 가상 DOM을 위한 HTML 파일로 메인 프로그램인 index.js에 대응되는 파일이다. index.js에 의해 일어나 렌더링된 결과가 표시된다.
※ 이름이 수정되면 안되는 파일들 ※
3. src
: 대부분의 리액트 소스 코드들이 작성
: src 폴더 안에는 JS 파일과 CSS파일들을 넣은면 된다.
: Webpack은 여기에 있는 파일만 보고 이 폴더 이외에 넣는 것은 Webpack에 의해 처리되지 않는다.
: src 폴더 안에 있는 파일들만 번들러가 작동한다.
1) App.js
컴포넌트를 정의하는 프로그램.
App.js에서 return()부분은 JSX를 사용해 html파일 내부 형태와 비슷하게 작성된다.
export default는 변수, 함수, 오브젝트, 클래스 등을 전달하는 명령어이다. export default를 붙이면 중괄호 없이 변수, 함수 등을 import 할 수 있다.
export default는 다른 파일에서도 해당 파일을 사용하기 위해 적어줘야 한다.
2) index.js
메인 프로그램으로, HTML 템플릿 및 자바 스크립트의 컴포넌트르 조합하여 렌더링하고 표시
4. .gitignore
: 프로젝트에 항상 필요. git에 올리지 않는 것들을 .gitignore 파일에 목록화
5. package-lock.json
: npm을 사용하여 node_modules 이나 package.json 파일을 실행하게 되면 자동으로 생성되는 파일( npm install을 하여 node_modules나 package.json이 업데이트 되면, package.json과 똑같지만 좀 더 정확한 정보를 가지고 자동 생성)
6. package.json
: 해당 프로젝트에 대한 정보들이 들어있다.(프로젝트 이름, 버전, 필요한 라이브러리, 라이브러리의 버전등)
: 앱을 시작할 때 사용할 스크립트, 앱을 빌드할 때, 테스트 할 때 사용할 스크립트 등이 명시
프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능하다.
'Front-End > React JS' 카테고리의 다른 글