카테고리 없음
리엑트 강의 내용 정리2
jkkll
2022. 7. 1. 23:20
useEffect
코드가 한번만 실행될 수 있도록 한다
import React, { useEffect } from "react";
import { useState } from "react";
function App() {
const [counter, setValue] = useState(0);
const [keyword, setKeyword] = useState("");
const onClick = () => setValue((prev) => prev + 1);
const onChange = (event) => setKeyword(event.target.value);
//[]안의 값이 업데이트 될 때 실행된다
useEffect(() => {
console.log("I run only once");
}, []);
useEffect(() => {
console.log("I run when 'keyword' changes.");
}, [keyword]);
useEffect(() => {
console.log("I run when 'counet' changes");
}, [counter]);
useEffect(() => {
console.log("I run when 'keword' & 'counter' changes");
}, [keyword, counter]);
useEffect(() => {
if (keyword !== "" && keyword.length > 5) {
console.log("SEARCH FOR", keyword);
}
}, [keyword]);
return (
<div>
<input
value={keyword}
onChange={onChange}
type="text"
placeholder="Search here..."
/>
<h1>{counter}</h1>
<button onClick={onClick}>click me</button>
</div>
);
}
export default App;cleanup
function Hello() {
useEffect(function () {
console.log("hi :)");
return function () {
console.log("bye");
};
}, []);
useEffect(() => {
console.log("hi :)");
return () => console.log("bye :(");
}, []);
return <h1>Hello</h1>;
}
function App() {
const [showing, setShowing] = useState(false);
const onClick = () => setShowing((prev) => !prev);
return (
<div>
{/*showing이 true경우 Hello컴포넌트 보여주고 false일 경우 null */}
{showing ? <Hello /> : null}
<button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
</div>
);
}
export default App;ToDo list
import React, { useState } from "react";
function App() {
const [toDo, setToDo] = useState("");
const [toDos, setToDos] = useState([]);
const onChange = (event) => setToDo(event.target.value);
const onSubmit = (event) => {
event.preventDefault();
if (toDo === "") {
return;
}
//currentArray의 element를 가져와서 새로운 array를 만들기 위해 ...작성
//작성했던 todo와 새로 작성한 todo를 합쳐서 array를 생성해준다
setToDos((currentArray) => [toDo, ...currentArray]);
setToDo("");
};
console.log(toDos);
return (
<div>
<h1>My To Dos ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input
onChange={onChange}
value={toDo}
type="text"
placeholder="Write your to do..."
/>
<button>Add To Do</button>
</form>
<hr />
//toDos array를 가져와 각 todo를 의미하는 이름 설정(item)해주고 key값을 입력하기 위해 index를 추가한다
<ul>
{toDos.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default App;Coin Tracker
import React, { useEffect, useState } from "react";
function App() {
const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);
useEffect(() => {
//then response를 받아서 reponse.json을 return해준다
fetch("https://api.coinpaprika.com/v1/tickers")
.then((response) => response.json())
.then((json) => {
// .then((json) => console.log(json));
// useState추가 후 setCoins json설정
setCoins(json);
//setLodaing을 false로 변경해서 loading텍스트가 안 보이게 한다
setLoading(false);
});
}, []);
return (
<div>
<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
{/*로딩이 아닐 경우 표시해준다 */}
{loading ? (
<strong>Loading...</strong>
) : (
<select>
{coins.map((coin, id) => (
<option key={id}>
{coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
</option>
))}
</select>
)}
</div>
);
}Movie App
import React, { useEffect, useState } from "react";
function App() {
const [loading, setLoading] = useState(true);
//기본값을 빈 배열로 설정해준다
const [movies, setMovies] = useState([]);
//async-await사용법 좀 더 보편적으로 사용됨
//getMovies라는 함수생성 async함수가 됨
//useEffect를 이용해 getMovies호출
//then을 사용하는 대신에 const response...
//json 가져와서 await response.json
//이게 더 보기 좋다고함,
//밑 버전의 짧은 버전 useEffect부분은 같음
const getMovies = async () => {
const json = await (
await fetch(
`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
)
).json();
setMovies(json.data.movies);
setLoading(false);
};
useEffect(() => {
getMovies();
}, []);
// const getMovies = async () => {
// const response = await fetch(
// `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
// );
// const json = await response.json();
// setMovies(json.data.movies);
// setLoading(false);
// };
// useEffect(() => {
// getMovies();
// }, []);
//일반적 fetch사용
// useEffect(() => {
// //평점이 8.5이상인 영화 url
// fetch(
// `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`
// )
// //response를 받아와서 response.json을 return해주고 json을 가져와서 콘솔로 출력
// .then((response) => response.json())
// // .then((json) => console.log(json));
// //console확인후 data있는 부분
// .then((json) => {
// setMovies(json.data.movies);
// //로딩을 끝냈기 때문에 false로 바꿔준다
// setLoading(false);
// });
// }, []);
//movies를 console출력해보면 data를 받아온것을 확인할 수 있다
// console.log(movies);
return (
<div>
{loading ? (
<h1>Loading...</h1>
) : (
<div>
{movies.map((movie) => (
<div key={movie.id}>
<img src={movie.medium_cover_image} />
<h2>{movie.title}</h2>
<p>{movie.summary}</p>
{/*array를 가져올 경우 map을 써준다 g는 사용자설정이름이다 각 genres를 뜻한다 첫번재 argument
key값에 g는 고유값이기 때문에 써줄 수 있다
*/}
<ul>
{movie.genres.map((g) => (
<li key={g}>{g}</li>
))}
</ul>
</div>
))}
</div>
)}
</div>
);
}
export default App;react-router-dom
npm install react-router-dom 설치
페이지 이동
import React, { useEffect, useState } from "react";
import Movie from "./components/Movie";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/movie" element={<Detail />} />
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
}
export default App;깃헙 페이지
설치
npm i gh-pages
build-코드를 압축하고 최적화 npm build로 실행시킬 수 있다
npm build로 실행시킨 후 build폴더가 생성되면 그걸 github pages에 push한다
push하기 전 package.json에서
마지막 부분에 homepage" :https:유저이름.github.io/폴더이름 적어준다
scripts부분
추가로 작성해준다 predeploy는 deply실행 전에 먼저 실행된다 npm run deploy하면 predeply가 먼저 실행되어
npm run build를 실행하게 된다 그리고 react-script 실행 후 다 끝나면 deploy가 실행된다
deploy는 homepage부분에 적어놓은 웹사이트에 업로드한다