1. node_modules
npm에서는 외부 모듈들을 다운받고 관리해준다.
다운 받은 외부 모듈들이 node_modules에 들어간다.
2. package.json
프로젝트의 설정들이 들어간다.
외부 모듈을 다운받으면 dependencies에 모듈명과 버전들이 기입된다.
외부 모듈 다운 시 package.json에 모듈 정보가 기입되고 node_modules에 특정 모듈이 설치된다.
scipts에 start부분을 보면 react-scripts start가 있는데, 이는 우리가 리액트를 동작시키기 위해 npm start를 치면 해당 코드가 동작하는 것이다.
3. public > index.html
public은 주로 이미지 파일을 추가할 때 사용한다.
src폴더에서 코딩을 하게 될 것이다. css, js 등으로 코딩을 하게 되면 바벨, 웹팩 등의 도구로 활용해서 public > index.html에 새로운 태그들을 넣게 된다.
2023.04.19 추가
아래서부터는 컴포넌트 구조이다.
리액트에서 컴포넌트 구조라고 할 수 있는 것은 1) 함수형태로 되어 있어야하며, 2) 반드시 UI요소를 반환해야 한다.
4. src > index.js
index.js는 리액트가 처음 시작될 때 가장 먼저 시작한다.
import를 이용해 라이브러리, 모듈을 다운받을 수 있고, index.css와 같이 직접 작성한 문서도 가져올 수 있다.
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>
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();
root.render 부분을 보면 root라는 아이디를 받아오는 것을 볼 수 있는데, 이 때 root는 public>index.html에 있는 id=root이다.
저 div 안에다가 root.render의 값을 넣는 것이다.
5. src > App.js
App.js에는 export default App이 명시되어 있어 딴 데서도 import 할 수 있게 해둔 것이다. App.js에는 App이라는 함수가 있다.
App이 index.js로 불려와지고, 불려와진 결과물들이 root 즉, index.html에 들어가게 된다.
import logo from './logo.svg';
import './App.css';
import ChildComponent from './child.js';
function App() {
return (
<h1 className="t">안녕하세요!</h1>
);
}
export default App;
return의 결과물들을 화면에 보여주게 되는 것이다. 또한 html에서 class가 쓰였는데, 리액트에서는 class가 className으로 쓰인다.
또한 컴포넌트는 태그형식으로 작성할 수 있다.
function ChildComponent(props){
const {name, age} = props;
return <div>
<p>이름은 {name} 이며, {age}살 입니다.</p>
</div>
}
export default ChildComponent;
만약 이런 컴포넌트를 만들었다면,
<ChildComponent name="산하" age={26} />
이런식으로 태그로 쓸 수 있다.
추가로 이렇게 자식 컴포넌트를 부르는 컴포넌트를 부모 컴포넌트라고 한다.
리액트에는 부모와 자식 관계가 있다.
import logo from './logo.svg';
import './App.css';
import ChildComponent from './child.js';
function App() {
return (
<div>
<h1>안녕하세요!</h1>
<ChildComponent name="산하" age={26} />
</div>
);
}
export default App;
'FE > React' 카테고리의 다른 글
[React] 상품 상세페이지 만들기 : 어떻게 여러 페이지를 한 번에 구분할 수 있을까? (0) | 2023.04.27 |
---|---|
[React] react-router-dom (0) | 2023.04.24 |
[React] axios 통신으로 상품 정보 가져오기 (0) | 2023.04.20 |
[React] jsx / Props / state (2) | 2023.04.20 |
[React] React 시작하기 & node 다운받기 (0) | 2023.04.18 |