메인 페이지 Coins.tsx /
<Route path="/" element={<Coins/>}></Route>
상세 페이지 Coin.tsx
<Route path="/:coinId" element={<Coin />}>
Coins.tsx 코드
<CoinList>
{coins.map((coin) => (
<Coin key={coin.id}>
<Link to={`/${coin.id}`} state={{ name: coin.name }}>
<Img
src={`https://cryptocurrencyliveprices.com/img/${coin.id}.png`}
/>
{coin.name} →
</Link>
</Coin>
))}
</CoinList>
link 색깔 변경 방법 => GlobalStyle에서 a태그 설정
a {
text-decoration:none;
color:inherit;
}
link 컴포넌트 hover 적용
const Coin = styled.li`
background-color: white;
color: ${(props) => props.theme.bgColor};
padding: 20px;
border-radius: 15px;
margin-bottom:10px;
a{
align-items: center;
transition:color 0.2s erase-in;
// display:block;//이전에는 화살표까지만 클릭 가능 -> 전체 선택가능으로 변경
display:flex;
}
&:hover {
a {
color: ${(props) => props.theme.accentColor};
}
}
`;
최초 렌더링 시 데이터 정보 fetch 해옴 ... async, await
const [coins, setCoins] = useState<CoinInterface[]>([]);
useEffect(() => {
(async () => {
const response = await fetch('https://api.coinpaprika.com/v1/coins');
const data = await response.json();
setCoins(data.slice(0, 100));
setLoading(false);
})();
}, []);
data 예시
{
id: "btc-bitcoin",
name: "Bitcoin",
symbol: "BTC",
rank: 1,
is_new: false,
is_active: true,
type: "coin",
},
{
id: "eth-ethereum",
name: "Ethereum",
symbol: "ETH",
rank: 2,
is_new: false,
is_active: true,
type: "coin",
},
{
id: "hex-hex",
name: "HEX",
symbol: "HEX",
rank: 3,
is_new: false,
is_active: true,
type: "token",
},