메인페이지(코인리스트) 상세페이지(해당코인)

ha·2022년 5월 12일
0

타입스크립트

목록 보기
2/11

메인 페이지 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} &rarr;
			</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",
},

0개의 댓글