#5.2-8.

Jisoo Shin·2023년 10월 9일

reactjs

ReactJs마스터클래스

목록 보기

11/17

본 포스팅은 노마드 코더의 React JS 마스터클래스를 수강한 뒤 작성되었습니다.

📌 #5.2 & 3 Home Part One

(1) 바로 실행 가능한 함수 만들기

아래와 같이 ()()를 사용해 코드를 작성하면 바로 실행 되는 function을 만들 수 있다.

    useEffect(() => {
        (async() => {
            fetch("https://api.coinpaprika.com/v1/coins")

        })();
    }, [])

(2) 배열(array) 자르기

-> slice를 사용하면 된다.

아래는 예시이다.

const a = [1,2,3,4,5];
a.slice(0,2); //이렇게 하면 앞에서부터 3개의 요소들만 有

//실제 Coins.tsx에서 API에서 정보들 가져오고 앞에서부터 100개만 가져오는 예시
    const [coins, setCoins] = useState<CoinInterface[]>([]);
    useEffect(() => {
        (async() => {
            const response = await fetch("https://api.coinpaprika.com/v1/coins")
            const json = await response.json();
            setCoins(json.slice(0,100));
        })();
    }, [])

현재 우리는 https://api.coinpaprika.com/v1/coins 이 API를 사용해서, 코인 정보들을 불러오고 있다.

❗ 위의 코드상에서는 fetch를 통해 API를 불러오고 있는데, 우리는 React Query를 사용함으로써 이를 간단하게 만들 수 有!! ❗

📌 #5.4 Route States

(1) 해당 API를 사용해서 코인의 이미지를 불러옴

https://coinicons-api.vercel.app/

📌 #5.5-6 Coin Data

다음 코스에서 detail 페이지를 꾸미기위한 데이터를 2개의 URL에서 가져옴

coin id로 코인 받기 (Coins)
https://api.coinpaprika.com/v1/coins/btc-bitcoin
https://api.coinpaprika.com/#operation/getCoinById

coin id로 특정 코인에 대한 시세 정보 얻기 (Tickers)
https://api.coinpaprika.com/v1/tickers/btc-bitcoin
https://api.coinpaprika.com/#operation/getTickersById

📌 #5.7-8 Nested Routes

Nested Router (nested route)

: route 안에 있는 또 다른 route

웹 사이트에서 탭을 사용할떄 多 도움
state를 사용해서 관리하는 것이 X라, 또 다른 url를 가지고 진행하는것

아래는 Coin.tsx의 예시 코드이다.

          <Tabs>
            <Tab isActive={chartMatch !== null}>
              <Link to={`/${coinId}/chart`}>Chart</Link>
            </Tab>
            <Tab isActive={priceMatch !== null}>
              <Link to={`/${coinId}/price`}>Price</Link>
            </Tab>
          </Tabs>

          <Switch>
            <Route path={`/:coinId/price`}>
              <Price />
            </Route>
            <Route path={`/:coinId/chart`}>
              <Chart />
            </Route>
          </Switch>

즉, Switch문을 사용해서 한번에 하나의 Route만 선택되게 만들었고, 각 tab에 해당하는 정보를 보여주는 방식으로 현재 url/price | url/char로 url를 변경하는 방법을 쓴 것이다~!

url이 변경되는 것이므로, link를 사용해서 해당하는 url로 변경해주었다.

따라서, 아래 동영상을 보면 url이 변경되는 것을 볼 수 있다.

useRouteMatch

: 해당 hook은 너가 특정한 URL에 있는지의 여부를 알려줌

//내가 coinId/price라는 URL에 있는지 확인해줘!
  const priceMatch = useRouteMatch("/:coinId/price");

//내가 coinId/chart라는 URL에 있는지 확인해줘!
  const chartMatch = useRouteMatch("/:coinId/chart");

if) priceMatch를 console.log해본다면, 아래와 같이 해당 url에 有는 경우 object안에 isExact의 값이 true로 되어있음을 알 수 O.

이제 받은 prop을 가지고 tab에서 진행을 해준다.

const Tab = styled.span<{ isActive: boolean }>`
  color: ${(props) =>
    props.isActive ? props.theme.accentColor : props.theme.textColor};
`;

          <Tabs>
            <Tab isActive={chartMatch !== null}>
              <Link to={`/${coinId}/chart`}>Chart</Link>
            </Tab>
            <Tab isActive={priceMatch !== null}>
              <Link to={`/${coinId}/price`}>Price</Link>
            </Tab>
          </Tabs>