리액트로 CRUD 기능이 있는 단순한 페이지를 만드는 것을
하나씩 분리해서 독파해가면서 정리하는 글을 써보려고 함
(총기 부품을 하나하나 분해해서 이게 무슨 역할이다~ 어디에 쓰인다~
무슨 원리이다~ 설명하듯이 쓰려 함)
(!!!! 해당 내용은 공부한 후 필자가 이해한대로 쓰는 것이므로 사실과 다를 수 있음. 애초에 지식 공유 컨셉이 아니라 기록을 남기는 용도이다.)
[1] 리액트 설치
단순히 리액트 프로젝트를 시작하려는 폴더에 한다면
vscode에서 폴더를 열고
npx create-react-app .터미널에 해당 코드를 넣으면 알아서 세팅해준다. 마지막 .은 현재 폴더에 설치하겠다는 뜻.
(단, 이전에 node.js가 설치되어 있어야한다.)
[2] 기본으로 설치된 폴더와 파일을 파악하자.(중요한 것만)
처음 설치하면 폴더와 파일의 구성은 다음과 같다.
📁 node_modules : package.json에 있는 목록에 대한 파일들을 모아놓은 곳
💾 package.json : 해당 프로젝트에 설치한 것, 설정한 것을 적어 놓는 곳이라고 이해했다. 터미널에 npm i 를 치면 여기 있는 항목들이 모두 node_modules에 설치되는 것이다.
📁 public : 주로 정적 파일(이미지, html, css 등)을 저장하는 곳
💾 index.html : 리액트는 Single Page Application이다. 즉 하나의 html 위에 여러 화면들을 렌더링하여 표현하는 앱이다.
<div id="root"><div> root 아이디를 가진 div에 js로 화면을 바꿔가며 출력하는 형태이다.
(약간 옛날 슬라이드 프로젝터 같은 형태라고 하면 맞을까 싶다. 나이 지긋하신 교수님이 저거 쓸때 구닥다리를 아직도 쓰나 싶었다.)
📁 src : 실제 개발하는 파일을 저장하는 폴더
💾 index.js : public 폴더에 있던 index.html의 root 아이디를 가진 곳에 출력하겠다던 그 js이다. 내부에
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);라는 내용으로 써있다. root 상수가 html root에 연결되어 출력되는 것.
💾 App.js : index.js에 보면
<App />이라는 곳이 있다. App.js에 내용을 넣으면 저 부분에 해당 내용이 출력되는 것. App.js 안에는
function App() {
return (
<div className="App">
~ 내용 ~
</div>
);
}부분이 있는데, ~ 내용 ~ 부분에 출력하고자 하는 코드를 넣으면 index.js -> index.html 순으로 차근차근 출력되는 것.
💾 index.css, App.css : 각각 index.js, App.js에 적용되는 css이다. 단 리액트는 하나의 html안에서 모든 것이 출력되므로 css 사용에 유의하자.
[3] 리액트에서 import, export
리액트는 js기반이기 때문에 js식을 따른다. 필요한 파일이 있으면
import "./App.css";와 같이 파일을 불러온다. 혹은
import { useState } from "react";처럼 훅을 불러와서 사용한다.
그리고 index.js를 제외한 다른 js파일로 다른 페이지들을 제작할 수 있는데, 이때는 index.js에서 해당 js를 import하고, js파일의 마지막엔
export default App;처럼 export를 해주어야한다. 이런 js파일로 별도의 Component 파일을 만들어주면서 import~export의 반복으로 여러 페이지 및 파츠 출력이 가능하다. 위의 경우는 App.js에서 export 해준 것이고, App 또한 컴포넌트이다.
