1904
No
코딩앙마
강의 목록 : https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-
vscode 확장 패키지 추가
1. - Auto Import - ES6, TS, JSX, TSX
2. - Reactjs code snippets
3. - ESLint
4. - Prettier - Code formatter
Visual Studio Code 폴더/파일 아이콘 변경하기
리액트 프로젝트 생성
npx create-react-app 경로
예) npx create-react-app E:\react-app2
1.강의 소개
2.설치(create-react-app)
설치
#npx create-react-app voca
시작
#npm start
3.컴포넌트, JSX
App.js
import './App.css';
function App() {
const name = "Tom";
const naver = {
name: "네이버",
url: "https://naver.com",
}
return (
<div className="App">
<h1 style={{
color: "#f0f",
backgroundColor: "green"
}}>
Hello, {name}. <p>{2 + 3}</p>
</h1>
<a href={naver.url}>{naver.name}</a>
</div>
);
}
export default App;
4.첫 컴포넌트 만들기
Hello.js
import React from 'react';
import World from './World';
const Hello = () => {
return (
<div>
<h1>Hello</h1>
<World />
<World />
</div>
);
};
export default Hello;
Welcome.js
import React from 'react';
const Welcome = () => {
return <h1>Welcome</h1>;
};
export default Welcome;
World.js
import React from 'react';
const World = () => {
return <h3>World!</h3>
};
export default World;
App.js
import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';
function App() {
return (
<div className="App">
<Hello />
<Hello />
<Welcome />
<Hello />
</div>
);
}
export default App;
5.CSS 작성법(module css)
1. 직접 CSS 작성
<h1
style={
{
color: '#f00',
borderRight: '2px solid #000',
marginBottom: "30px",
opacity: 1
}
}
>Hello</h1>
App.css
.box{
width: 100px;
height: 100px;
background-color: red;
}
2. index.CSS 에 전체 프로젝트 CSS 작성
3. 모듈로 개별적인 컴포넌트 css 적용
1) Hello.module.css = > Hello 컴포넌트 이름과 동일 + module.css
2) 임포트 import styles from "./Hello.module.css";
3) <div className={styles.box} >Hello</div>
Hello.module.css
.box{
width: 200px;
height: 50px;
background-color: blue;
}
Hello.js
import React from 'react';
import styles from "./Hello.module.css";
const Hello = () => {
return (
<div>
<h1
style={
{
color: '#f00',
borderRight: '2px solid #000',
marginBottom: "30px",
opacity: 1
}
}
>Hello</h1>
<div className={styles.box} >Hello</div>
</div>
);
};
export default Hello;
App.module.css
.box{
width: 100px;
height: 100px;
background-color: red;
}App.js
import './App.css';
import Hello from './component/Hello';
import styles from './App.module.css';
function App() {
return (
<div className="App">
<Hello />
<div className={styles.box} >App</div>
</div>
);
}
export default App;
6.이벤트 처리(Handling Events)
Hello.js
const Hello = () => {
function showName() {
console.log("Mike");
}
function showAge(age) {
console.log(age);
}
function showText(txt) {
console.log(txt);
}
return (
<div>
<h1>Hello</h1>
<button onClick={showName}>Show name</button>
<button onClick={() => {
showAge(30);
}} >Show age</button>
<br /> <br />
<input type="text" onChange={(e) => {
const txt = e.target.value;
showText(txt);
}} />
</div >
);
};
export default Hello;
7.state, useState
Hello.js
import { useState } from "react";
const Hello = () => {
//let name = "Mike";
const [name, setName] = useState("Mike");
// function changeName() {
// const newName = name === "Mike" ? "Jane" : "Mike";
// //document.getElementById("name").innerText = newName;
// setName(newName);
// }
return (
<div>
<h1>state</h1>
<h2 id="name">{name}</h2>
<button onClick={() => {
setName(name === "Mike" ? "Jane" : "Mike");
}}>Change</button>
</div >
);
};
export default Hello;
App.js
import './App.css';
import Hello from './component/Hello';
function App() {
return (
<div className="App">
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
8.props
UserName.js
const UserName = ({ name }) => {
return (
<p> Hello {name}</p>
);
};
export default UserName;
Hello.js
import { useState } from "react";
import UserName from "./UserName";
const Hello = ({ age }) => {
//console.log(props);
const [name, setName] = useState("Mike");
//const [age, setAge] = useState(props.age);
const msg = age > 19 ? "성인 입니다." : "미성연자 입니다.";
return (
<div>
<h1>state</h1>
<h2 id="name">
{name} ({age}) : {msg}
</h2>
<UserName name={name} />
<button onClick={() => {
setName(name === "Mike" ? "Jane" : "Mike");
//setAge(age + 1);
}}>Change</button>
</div >
);
};
export default Hello;
App.js
import './App.css';
import Hello from './component/Hello';
function App() {
return (
<div className="App">
<h3>props : properties</h3>
<Hello age={10} />
<Hello age={20} />
<Hello age={30} />
</div>
);
}
export default App;
9.더미 데이터 구현, map() 반복문
더미데이터 => data.json
DayList.js
import dummy from "../db/data.json";
const DayList = () => {
return (
<ul className="list_day">
{dummy.days.map(day => (
<li key={day.id}>
Day {day.day}
</li>
))}
</ul>
);
};
export default DayList;
Day.js
import dummy from '../db/data.json';
const Day = () => {
const day = 1;
const wordList = dummy.words.filter(word => {
return word.day === day
});
return (
<>
<table>
<tbody>
{wordList.map(word => (
<tr key={word.id}>
<td>{word.eng}</td>
<td>{word.kor}</td>
</tr>
))}
</tbody>
</table>
</>
);
};
export default Day;
App.js
import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
function App() {
return (
<div className="App">
<Header />
<DayList />
<Day />
</div>
);
}
export default App;
10. 라우터 구현 react-router-dom
라우터 설치
$ yarn add react-router-dom
App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Day from './component/Day';
import DayList from './component/DayList';
import EmptyPage from './component/EmptyPage';
import Header from './component/Header';
function App() {
return (
<BrowserRouter>
<div className="App">
<Header />
<Routes>
<Route path="/" element={<DayList />} />
<Route path="/day/:day" element={<Day />} />
<Route path={"*"} element={<EmptyPage />} />
</Routes>
</div>
</BrowserRouter >
);
}
export default App;
DayList.js
import dummy from "../db/data.json";
import { Link } from 'react-router-dom';
const DayList = () => {
return (
<ul className="list_day">
{dummy.days.map(day => (
<li key={day.id}>
<Link to={`/day/${day.day}`}>Day {day.day}</Link>
</li>
))
}
</ul >
);
};
export default DayList;
Day.js
import dummy from '../db/data.json';
import { useLocation, useParams } from 'react-router-dom';
const Day = () => {
const location = useLocation();
const params = useParams();
console.log("params ", params, "location ", location);
const { day } = useParams();
console.log("day :", day);
const wordList = dummy.words.filter(word => {
return Number(word.day) === Number(day)
});
return (
<>
<h2>Day {day}</h2>
<table>
<tbody>
{wordList.map(word => (
<tr key={word.id}>
<td>{word.eng}</td>
<td>{word.kor}</td>
</tr>
))}
</tbody>
</table>
</>
);
};
export default Day;
EmptyPage.js
import { Link } from 'react-router-dom';
const EmptyPage = () => {
return (
<div style={{
textAlign: "center",
marginTop: "100px"
}}>
<h2>
잘못된 접근입니다.
</h2>
<Link to="/">돌아가기</Link>
</div>
);
};
export default EmptyPage;
소스 : https://github.com/braverokmc79/React-for-beginners
댓글 ( 4)
댓글 남기기