에러 메시지
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
원인
1. react app이 return하는 내용들은 div로 묶어야 한다.
2. return문 안에서 삼항연산자를 사용했는데 false일 때 로딩할 코드를 div로 한번 더 감싸지 않아 발생했다.
해결
div 태그를 추가
import { useState, useEffect } from "react";
function App() {
const [loading, setLoading] = useState(true);
const [coins, setCoins] = useState([]);
useEffect(() => {
fetch("https://api.coinpaprika.com/v1/tickers")
.then((response) => response.json())
.then((json) => {
setCoins(json);
setLoading(false);
});
}, []); // 로딩 직후 1회만 코드 실행
return(
<div>
<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>
{loading ? (<strong>Loading...</strong>
) : (
<div> // div 추가
<input placeholder='KRW'></input>
<select>
{coins.map((coin) =>
<option>
{coin.name} ({coin.symbol}:{coin.quotes.USD.price} USD)
</option>)}
</select>
</div> // div 추가
)}
</div>
)
};
export default App;