useEffect(() => {
//패치해온 것 네트워크에서 확인 가능
//response로부터 json 추출 why? json안에 코인 데이터 있음.
.then((response) => response.json())
.then((json) => console.log(json));
}, []); //코드 한번만 동작
패치해 온 것은 네트워크 창에서 확인 가능함
json 안에 있는 데이터 사용 -> response로부터 json을 추출해야함
데이터를 컴포넌트에서 보여주는 방법 -> data를 state에 넣으면 됨 .
const [coins, setCoins] = useState([]);
.then((json) => {
setCoins(json);
setLoading(false); //coin 얻기를 끝냈다면 loading을 false로 바꿔주기
});
data api 파악.
coins라는 변수에 코인들의 array가 담겨있음. -> map 사용
따로 index 지정 필요X. why? 고유의 id가 있음.
내가 보여주고 싶은 정보: name, symbol, price
{coins.map((coin) => <li>
{coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
</li>)}
여기서 coins: coins array안에 있는 각각의 coin 의미
불러오기 성공.
<h1>The coins! ({coins.length}) </h1>
코인 갯수 확인
const [coins, setCoins] = useState([]);
useState에서 빈 array로 설정했기 때문에 로딩 중에는 coin 갯수 0으로 나옴.
모두 로딩 된 후 2500개로 update
만약,
const [coins, setCoins] = useState();
위처럼 빈 값을 넘겨주면 error.
why? component의 시작인 coins가 undefined이고 undefined는 length를 가지고 있지 않음.
const [coins, setCoins] = useState([]);
따라서 비어있는 array로 기본값 설정 필요.
import { useState, useEffect } from "react";
function App() {
const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);
useEffect(() => {
//패치해온 것 네트워크에서 확인 가능
//response로부터 json 추출 why? json안에 코인 데이터 있음.
.then((response) => response.json())
.then((json) => {
setCoins(json);
setLoading(false); //coin 얻기를 끝냈다면 loading을 false로 바꿔주기
});
}, []); //코드 한번만 동작
return(
<div>
<h1>The Coins! {loading ? "" : `(${coins.length})`} </h1>
{loading ? (
<strong>Loading...</strong>
) : (
<select>
{coins.map((coin) => (
<option>
{coin.name} ({coin.symbol}): ${coin.quotes.USD.price} USD
</option>
))}
</select>
)}
</div>
);
}
export default App;
Challenge) input을 받아 단위 변환
const [myAsset, setMyAsset] = useState([]);
<input
type="number"
value={myAsset}
onChange={onChange}
placeholder="input your asset(USD)" />
{coin.name} ({coin.symbol}): {myAsset / coin.quotes.USD.price} {coin.symbol}
import { useState, useEffect } from "react";
function App() {
const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);
const [myAsset, setMyAsset] = useState([]);
useEffect(() => {
//패치해온 것 네트워크에서 확인 가능
//response로부터 json 추출 why? json안에 코인 데이터 있음.
.then((response) => response.json())
.then((json) => {
setCoins(json);
setLoading(false); //coin 얻기를 끝냈다면 loading을 false로 바꿔주기
});
}, []); //코드 한번만 동작
function onChange(event){
setMyAsset(event.target.value)
}
return(
<div>
<h1>The Coins! {loading ? "" : `(${coins.length})`} </h1>
<input
type="number"
value={myAsset}
onChange={onChange}
placeholder="input your asset(USD)" />
<br/>
{loading ? (
<strong>Loading...</strong>
) : (
<select>
{coins.map((coin) => (
<option>
{coin.name} ({coin.symbol}): {myAsset / coin.quotes.USD.price} {coin.symbol}
</option>
))}
</select>
)}
</div>
);
}
export default App;
'FE > React & TS' 카테고리의 다른 글
[REACT Movie App part-one] fetch / async / await / axios / Cannot read properties of undefined (reading 'map') 오류 (0) | 2023.05.11 |
---|---|
[REACT] Axios (0) | 2023.05.11 |
[REACT] Event (0) | 2023.05.09 |
[REACT] map / key (0) | 2023.05.09 |
[REACT] component / state / useEffect (0) | 2023.05.08 |