[TIL] 2023-04-26

Today I Learned

---

[Front-End] - React

오늘은 클론사이트 작업을 마무리하였다. 오늘 작업한 코드는 detail페이지와 NftCard컴포넌트 부분을 작업하였다.

---

NftCard.jsx

{parseInt(mintedNft) < tokenId && (
        <div className="absolute bg-black w-full h-full bg-opacity-50 rounded-2xl flex justify-center items-center text-4xl font-bold">
          Not Minted.
        </div>
      )}

• 조건부 렌더링으로 &&에 내용이 true이면 아래 div태그를 생성한다.
• 즉 tokenId가 민팅된 nft보다 크다면 Not Minted가 nft카드 위에 덮어진다.

---

detail.jsx

  const { tokenId } = useParams();

  const getNft = async () => {
    try {
      const response = await axios.get(
        `${process.env.REACT_APP_JSON_URL}/${tokenId}.json`
      );

      setMetadata(response.data);
    } catch (error) {
      console.error(error);
    }
  };

• useParams로 url의 파라미터인 tokenId를 받아온다.