REACT
create react
cmd에서
npx create-react-app main를 입력한다.
실행하기
terminal에
npm start를 입력한다.
생성된 파일들 살펴보기
-> 이런 파일들이 생성된다.
-
node_modules 폴더 : 프로그램을 실행할 때 사용되는 dependency module(의존 모듈)들이 모두 모여있다. node_modules에 설치되어 있는 내용들은 package.json 파일에 기록되어 있다.
package.json 파일만 수정되지 않는다면, 만약 node_modules 폴더를 지우더라도 npm install만 해주면 다시 설치할 수 있다. 따라서 node_modules폴더는 git에 업로드할때도 올리지 않는다. 크기도 크고 파일도 많기 때문이다.
-
public 폴더
- index.html
index.html의 body에<div id="root"></div>가 있는데, 이 div root로 react 코드가 실행돼서 만들어진 dom이 구현된다.
- src 폴더 : 대부분의 작업은 여기서 진행된다.
- app.js
app.js의<p> </p>부분을 변경하면
브라우저에서도 바로 반영된다. [Hot Module Replacement(HMR)]
- index.js
import App from './App'; --> app.js파일을 불러오는 코드
브라우저에서 보이는 내용이 바로 app.js에 구현된 내용이다.
*reportWebVitals(); : 퍼포먼스 관련
- package.json
"scripts": { "start": "react-scripts start", // "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },package.json에는 4가지 debug모드가 있다.
start : 개발모드로 프로그램 실행
build : 실제 배포모드로 만들어줌
test : test모드
eject : 내부 설정파일을 꺼내는 역할
컴포넌트
모든 컴포넌트는 대문자로 시작해야한다.
- 함수형 컴포넌트 : 함수로 만들어진 컴포넌트
App.js에서 컴포넌트를 수정해보자
import './App.css';
function App() {
return (
<div className="App">
<h1 style = {
{color : "red"}
}
> welcome
</h1>
</div>
);
}
export default App;
-스타일은 {{color : "red",}} 처럼 객체로 전달해야 적용된다.
import './App.css';
function App() {
const naver = {
name : "네이버",
url : "https://naver.com"
};
return (
<div className="App">
<h1 style = {
{color : "red",
backgroundColor : "green"}
}
> welcome
</h1>
<a href={naver.url}>{naver.name}</a>
</div>
);
}
export default App;
-boolean이나 객체 타입은 지원이 안된다.
컴포넌트 생성
- js파일을 만든다.
- 컴포넌트 소스 작성
export default function Welcome() {
return <h2>Welcome</h2>
}- App.js 파일안에 import 및 코드를 작성한다(vscode는 auto import가 된다.)
import './App.css';
import Hello from './component/Hello.js';
import Welcome from './component/Welcome';
function App() {
return (
<div className="App">
<Hello />
<Welcome />
</div>
);
}
export default App;
컴포넌트에 css 적용하기
- (컴포넌트이름).module.css 생성
2 import하기
-js에서 import
import styles from "./Hello.module.css";- style 적용하기
-js에서
<div className={styles.box}> Hello </div>- index.css에 css를 전부 작성해도된다.
이벤트 처리
export default function Hello() {
function showName() {
console.log("Mike");
}
return (
<div>
<h1> Hello </h1>
<button onClick={showName}>Show name</button>
<button onClick={
()=> {console.log(30);}}>Show age</button>
</div>
)
}
state : 컴포넌트가 가지고 있는 속성값
import { useState } from "react";
export default function Hello() {
const [name, setName] = useState("Mike");
return (
<div>
<h2 id="name"> {name} </h2>
<button
onClick={() => {
setName(name === "Mike" ? "Jane" : "Mike");
}}
>
Change
</button>
</div>
);
}-> 버튼을 누르면 이름이 바뀌는 코드
각 컴포넌트는 독립적으로 switch할 수 있다
props
: 속성값, 컴포넌트에게 값을 전달해줄 때 사용하며 임의로 변경이 불가능하다.
라우터
: 사용자가 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리
import { BrowserRouter, Route, Switch } from "react-router-dom";
.
.
.
<Route exact path="/">
<DayList />
</Route>
<Route path="/day/:day">
<Day />
</Route>json server
: 아주 짧은 시간에 REST API 를 구축해주는 라이브러리이다.
- rest api : REST 기반으로 서비스 API를 구현한 것
- json server 설치
npm i -g json-server- 실행
json-server --watch (파일명).json --port (포트번호)예)
json-server --watch db.json --port 3001- 완료
