코딩앙마 리엑트 정리
리엑트 훅:
함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능
딤드 처리:
어둑하게 만드는 것
렌더링:
개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미
컴포넌트:
여러개의 함수들을 모아 하나의 기능을 수행할 수 있도록 구성한 작은 단위를 의미
컴포넌트의 장점:
코드를 재사용 할 수 있음, 유지보수가 훨씬 쉬워짐.
자바 스크립트에서는 class가 예약어라 대신 className을 사용.
cmd
npx create-react-app voca
vscode에 가서 voca 파일 열기
// App.js
function App() {
return (
<div className="App">
<h1
style={{
color: "#f0f",
backgroundColor : "green",
}}
>
Hello, Mike.
</h1>
</div>
);
}
// App.js
function App() {
const name = "Tom";
return (
<div className="App">
<h1
style={{
color: "#f0f",
backgroundColor : "green",
}}
>
Hello, {name}.<p> {2+3} </p>
</h1>
</div>
);
}
// App.js
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>
);
}
//Hello.js
const Hello = function () {
<p>Hello</p>;
};
export default Hello;
css 작성법 3가지
- 인라인 스타일 사용
// Hello.js
<h1
style={{
color: "#f00",
borderRight: "12px solid #000",
marginBottom: "50px",
opacity: 0.5,
}}
>
- css 파일 활용
// App.css
.box {
width: 100px;
height: 100px;
background-color: red;
}
- css 모듈 활용
가장 추천하는 방법 그러나 수업에서는 컴포넌트도 별로 필요 없고 페이지도 몇장 안되어서 2번 방법을 사용.
터미널로 npm install react-router-dom 설치
// Daylist.js
import { Link } from "react-router-dom";
import dummy from "../db/data.json";
export default function 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>
);
}
import { useState } from "react"
export default function Word({ word }){
const [isShow, setIsShow] = useState(false);
const [isDone, setIsDone] = useState(word.isDone);
function toggleShow() {
setIsShow(!isShow);
}
function toggleDone() {
setIsDone(!isDone);
}
return (
<tr className={isDone ? 'off' : ""}>
<td>
<input type="checkbox" checked={isDone} onChange={toggleDone} />
</td>
<td>{word.eng}</td>
<td>{isShow && word.kor}</td>
<td>
<button onClick={toggleShow}>
뜻 {isShow ? 'Show' : 'Hide'}
</button>
<button className="btn_del">delete</button>
</td>
</tr>
)
}
터미널에서
npm install -g json-server 입력 후 설치
성공적으로 설치 됐다고 뜨면,
json-server --watch ./src/db/data.json --port 3001 설치 (포트 3000은 이미 사용중이니까)
그럼
{^-^}/ hi! 라고 뜨고,
http://localhost:3001/days
http://localhost:3001/words
가 뜸.
REST API란?
create: post
read: get
update: put
delete: delete
useEffet & fitch()
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function Daylist() {
const [days, setDays] = useState([0]);
useEffect(() => {
fetch("http://localhost:3001/days")
.then((res) => {
return res.json();
})
.then((data) => {
setDays(data);
});
}, []);
return (
<>
<ul className="list_day">
{days.map((day) => (
<li key={day.id}>
<Link to={`/day/${day.day}`}>Day {day.day}</Link>
</li>
))}
</ul>
</>
);
}
custom hook
import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";
import Word from "./Word ";
export default function Day() {
const { day } = useParams();
const words = useFetch(`http://localhost:3001/words?day=${day}`);
return (
<>
<h2>Day {day}</h2>
<table>
<tbody>
{words.map((word) => (
<Word word={word} key={word.id} />
))}
</tbody>
</table>
</>
);
}
실습다하고 필기하니까 힘들다...담부터는 필기하고 실습하는 걸로...
Author And Source
이 문제에 관하여(코딩앙마 리엑트 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@milkteaisthebest/코딩앙마-리엑트-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)