React Js Master #3 createGlobalStyle , Link to, state, ,useLocation, datatypes

#1 일반 fetch

#2 react-query이용 

 

Nested Router 중첩된 라우터 

 

1.npm i react-router-dom react-query

react-router-dom : 어플리케이션에 url 가질수 있도록 /

 

2.Routes 폴더 생성 

  Coin.tsx , Coins.tsx파일, 컴포넌트 생성

 

3.Router.tsx 파일 생성

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Coin from "./routes/Coin";
import Coins from "./routes/Coins";

function Router() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/:coinId" element={<Coin />} />
                <Route path="/" element={<Coins />} />
            </Routes>
        </BrowserRouter>
    );
}
export default Router;

 

4. app.tsx

import Router from "./Router";

function App() {
    return <Router />;
}

export default App;

---

createGlobalStyle

 

styled.div``처럼 하나의 고립된 스타일이 아니라 

파일 전체에 reset css나 폰트 적용해야 할 때

스타일 컴포넌트는 이를 위한 property 갖고 있는데 createGlobalStyle

컴포넌트를 만드는데 렌더링 될 때 그 컴포넌트는 전역 스코프에 스타일을 올려준다.

 

import { createGlobalStyle } from "styled-components";
import Router from "./Router";

const GlobalStyle = createGlobalStyle`

body{         color:red;     }

`;

 

적용하기

 

function App() {
    return (
        <>//fragment 부모 없이 붙어있는 많은 것들을 반환해줌 .  <div></div>태그의 의미없는 반환을 막기위해 사용
            <GlobalStyle />
            <Router />
        </>
    );
}

 

 

--> https://github.com/zacanger/styled-reset/blob/master/src/index.ts

GitHub - zacanger/styled-reset: Eric Meyer's Reset CSS for styled-components

Google Fonts
https://fonts.google.com

Google Fonts

 

reset.css파일, 폰트등을  ㅁ칸 안에 넣어 전역적으로 css를 적용.

 

Flat UI Color
https://flatuicolors.com/palette/gb

 

createGlobalStyle를 이용한 reset,폰트 설정 참고

https://github.com/UHyun-K/react-master/blob/master/src/App.tsx

GitHub - UHyun-K/react-master

---

화면에 그려져있는 bitcoin이라고 적혀있는 글자를 클릭했는데 

눌러서 들어가면 다시 bitcoin이라는 이름의 정보를 얻기위해 api접속하여 가져와야한다.

loading..이라고 표시되는 화면은 덤..

우리는 이미 정보를 브라우저에서 알고있는데!

 

Link를 통해서 object로 정보를 보낼 수 있다. !

 

Coins.tsx 

    return (
        <Container>
            <Header>
                <Title>코인</Title>
            </Header>
            {loading ? (
                <Loader>"Loading.."</Loader>
            ) : (
                <CoinsList>
                    {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>
                    ))}
                </CoinsList>
            )}
        </Container>
    );

 

RouterState

Coin. tsx
function Coin() {
    const [loading, setLoading] = useState(true);
    const { coinId } = useParams();
    const location = useLocation();
    console.log(location);
    return (
        <Container>
            <Header>
                <Title>코인{coinId}</Title>
            </Header>
            {loading ? <Loader>"Loading.."</Loader> : null}
        </Container>
    );
}

console.log창

 

unction Coin() {
    const [loading, setLoading] = useState(true);
    const { coinId } = useParams();

    interface RouterState {
        name: string;
    }
    const { state } = useLocation();
    const { name } = state as RouterState;
    return (
        <Container>
            <Header>
                <Title>{name}</Title> //api로 부르는게 아니라 app이 빠르게 구동되는 것처럼 보임

            </Header>
            {loading ? <Loader>"Loading.."</Loader> : null}
        </Container>
    );
}

 

 

title은 state로 넘겨 받은 정보라 api보다 빨리 구현된다.

 

 

 

home 화면에서 받은 state를 coins로 넘겨주는 것이기 때문에

시크릿 모드로 해당 브라우저를 열게되면 받은 state:name이 없기 때문에 오류가난다.

 

 

function Coin() {
    const [loading, setLoading] = useState(true);
    const { coinId } = useParams();

    interface RouterState {
        name: string;
    }
    const state = useLocation().state as RouterState;
    console.log(state);

    return (
        <Container>
            <Header>
                <Title>{state?.name || `Loading...`}</Title>
            </Header>
            {loading ? <Loader>"Loading.."</Loader> : null}
        </Container>
    );

---

   useEffect(() => {
        (async () => {
            const infoData = await (
                await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
            ).json();
            console.log(infoData);
            const priceData = await (
                await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
            ).json();
            console.log(priceData);
            setInfo(infoData);
            setPriceIn

가져온 데이타를 console.log해서 글로벌 변수로 지정해주고 위와같은 방식으로 key를 가져온다.

편하게 typescript로 작성할 수 있도록 

 

 

주의할 점 

 

array로 이루어진 object인데 typeof value하면 object라고만 나와있음

직접 지정해준다.

 

interface ITage {
    coin_counter: number;
    ico_counter: number;
    id: string;
    name: string;
}

interface InfoData {
    id: string;
    name: string;
    symbol: string;
    rank: number;
    is_new: boolean;
    is_active: boolean;
    type: string;
    tags: ITage[];

]

array가 이루어져있다면 직접 설명해줘야한다.

 

이제 infoData에대한 설명이 이루어졌다면

function Coin() {
    const [loading, setLoading] = useState(true);
    const { coinId } = useParams();
    const state = useLocation().state as RouterState;
    const [info, setInfo] = useState<InfoData>(); //({}); 중괄호 삭제

useState에 타입정의 ,

 

 

 

 

VSCode 단축키

Shift+Alt(Option)+i: 선택한 모든 문자열에 가장 우측 끝으로 포커싱

Alt + Shift 드래그 하시면 커서를 좀 더 편하게 만드실 수 있습니다 :)
Ctrl(Command)+Shift+오른쪽 화살표: 현재 선택한 문자열을 기준으로 우측 끝까지 문자열 선택

노마드코더 코딩 인생 꿀템 VSC 단축키 5분 정리해드림
https://www.youtube.com/watch?v=Wn7j5dfbJF4

JSON 데이터를 타입스트립트 타입으로 빠르게 변환시켜주는 사이트

https://app.quicktype.io/?l=ts

Instantly parse JSON in any language | quicktype

http://json2ts.com/

 

옵셔널 체이닝 ?.에 대한 설명 

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없습니다.

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

 

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있습니다.

1. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽습니다. ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행합니다.

?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있습니다.

?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 합니다.

꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말도록 합시다.