[React] Coin Tracker 강의 정리

🚨 이 글은 노마드 React JS 마스터 강의를 본 후 정리한 글입니다. 강의 내용에 대한 언급 없이 강의를 보면서 새로 익힌 Hooks나 Componenet, Library 등을 간략하게 정리한 글입니다.

👩‍💻 개발환경 세팅

react-typescript 설치

터미널에서 원하는 폴더에 들어간 뒤 명령어를 실행시켜줍니다.
(업데이트 때문에 버전을 설정하지 않고, 설치를 하면 오류도 많이 뜨고 새로운 문법에 맞춘다고 시간을 너무 잡아먹기 때문에 특정 버전 정해놓고 사용하는게 좋을 것 같습니다.😢)

npx create-react-app{project-name} --template typescript
npm install --save react@^17.0.2 react-dom@^17.0.0

파일 정리 (삭제해도되는 파일)

src

• App.css
• App.test.tsx
• index.css
• logo.svg
• reportWebVitals.ts
• setupTests.ts

public

• favicon.ico
• logo192.png
• logo.512.png
• robots.txt

파일 삭제 후 App.tsx, index.tsx, index.html 파일 내부도 깔끔하게 정리해줍니다.

패키지 및 라이브러리 설치

여러가지 패키지를 설치 할 때는 띄어쓰기로 구분해 작성해주면 한번에 설치가 가능합니다.
React Router 6버전으로 진행 시 @types/react-router-dom를 설치하지 않아도 타입을 불러옵니다.
styled-components도

npm i react-query
npm i @types/styled-components

reset-css

css를 초기화하는 방법에는 여러가지가 있습니다.
1. .css파일에 초기화 코드를 붙여넣기
2. styled-reset 패키지를 설치 후 component를 가져오기

npm i styled-reset

App.tsx

import { Reset } from 'styled-reset';

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

export default App;

3. createGlobalStyle사용
   GlobalStyle.ts를 생성해 reset파일 작성 후 App.tsx파일에서 가져오기

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyled = createGlobalStyle`
  ${reset}
  * {
    box-sizing: border-box;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
`;

export default GlobalStyled;

---

👩‍💻 Theme

테마는 공통적으로 사용되는 스타일을 테마로 묶어 코드의 일관성을 지킬 수 있도록 합니다.

1. styled.d.ts 라는 파일을 생성

• .d.ts를 타입선언파일이라 하며, ts코드의 타입 추론을 돕는 파일
• 테마에 사용될 변수들의 타입을 선언하는 곳
• styled-components 모듈에 DefaultTheme이라는 이름의 인터페이스를 생성해 타입을 작성

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    accentColor: string;
  }
}

2. theme.ts 파일 생성

• 테마를 작성할 때 import 하여 테마안에 선언된 타입에 맞게 스타일을 작성

import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  bgColor: "#2f3640",
  textColor: "#f5f6fa",
  accentColor: "#9c88ff",
};

3. index.tsx 파일에 import

import {theme} from './theme';

---

👩‍💻 react-router-dom

v6로 업데이트 되면서 Switch 대신 Routes를 사용합니다.
만약 react-router-dom부분에서 에러가 난다면 다음 명령어를 실행 시켜줍니다.

npm i --save-dev @types/react-router-dom

Router.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Coins />} />
      </Routes>
    </BrowserRouter>
  );
}

---

👩‍💻 Hooks

useParams();

URL의 파라미터 부분을 잡아내고 싶을 때 사용합니다.
URL Parameter가 무엇이냐면 Router파일에 작성한 :coinId 자리에 입력한 주소값입니다.

import { useParams } from "react-router-dom";
const { coinId } = useParams();

상단에 꼭 import 해주고 v6부터는 interface로 타입을 명시해주지 않아도 알아서 coinId를 string | undefined로 타입을 설정합니다.

useLocation();

앞서 말한 useParams과 비슷한 훅스입니다. useParams는 path parameter 정보를 가져오고, useLocation은 query string 정보를 얻어옵니다.
console.log(location)을 찍어보면 여러가지가 출력되는데 그중, pathname과 search 객체가 출력되는 것을 볼 수 있습니다.

pathname은 URL이 http://localhost:3000/btc-bitcoin 이라고 했을 때, query string을 제외한 /btc-bitcoin이 출력됩니다.

search는 pathname이 출력했던 부분을 제외한 query string이 출력됩니다.

하지만 실제 작업에서는 state 객체를 추가해서 넘겨줬기 때문에 state값을 가져와야하는데 이때는 아래와 같이 작성해줍니다.

import { useLocation} from "react-router-dom";

inertface RouteState {
  name: string;
}

function Coin() {
const location = useLocation();
const name = location.state as RouteState;
  return();
}

useMatch();

사용자가 특정한 URL에 있는지 여부를 알려주는 훅스입니다.
v6로 업데이트 되면서 기존에 useRouteMatch()가 없어지고 useMatch()를 이용해야합니다.
우리가 useMatch("ULR")에게 URL을 작성하면 특정한 URL이 있는지 확인해달라고 요청을 하게됩니다.

const chartMatch = useMatch("/:coinId/chart");
const priceMatch = useMatch("/:coinId/price");

<Tab isActive={chartMatch !== null}>
  <Link to={`/${coinId}/Chart`}>Chart</Link>
</Tab>

---

React Query

1. 명령어 실행

npm i react-query

2. index.tsx 파일에 작성

• QueryClient, QueryClientProvider 가져오기
• 상수로 new QueryClient 선언하기
• QueryClientProvider 컴포넌트로 theme과 App 컴포넌트 감싸기

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

3. api.ts 파일을 생성 후 fetcher 함수 작성

• promise를 쓰는게 더 깔끔해서 promise로 사용

// ver. promise
export function fetchCoins() {
  return fetch(https://api.coinpaprika.com/v1/coins).then(response => response.json());
}

// ver. async / await
export async function fetchCoins() {
return await (await fetch("https://api.coinpaprika.com/v1/coins")).json();
}

4. 다시 fetch해 두었던 파일로 돌아와서 작성

const {isLoading, data} = useQuery<{interface-name}>("key(고유식별자)", fetcher-func)

isLoading은 true 또는 false인 boolean 값으로 서버의 데이터들이 모두 로딩되면 boolean값을 리턴합니다.
이 때, useQuery()에는 두가지 인자가 들어가는데 하나는 key = query의 고유 식별자, 또 하나는 fetcher 함수가 들어갑니다.

🚨 만약 useParams를 사용한다면 fetcher 함수에 변수를 넘겨주고

export function fetcher(변수: string | undefined) {
  return fetch(...).then(response => response.json());
}

본래 파일로 돌아와서 아래와 같이 작성해 줍니다.

const {변수} = useParams();
const { isLoading, data } = useQuery(["변수의 key", 변수], () => fetchCoinInfo(변수));

---

Nested Routing

부모 route의 path 마지막에 /*을 작성해줘서 이 route의 내부에서 nested route가 render 될 수도 있음을 표시한 뒤 자식 route를 부모 route의 element내부에 작성하는 것
Router.tsx

<Route path="/:coinId/*" element={<Coin />} />

Coin.tsx

<Link to={`/${coinId}/chart`}>Chart</Link>
<Link to={`/${coinId}/price`}>Price</Link>

<Routes>
  <Route path="chart" element={<Chart />} />
  <Route path="price" element={<Price />} />
</Routes>

---

APEX CHARTS

현대적이고 인터랙티브한 오픈 소스 차트 (https://apexcharts.com)

1. 명령어 실행

npm install --save react-apexcharts apexcharts

2. ApexChart를 가져온 후 컴포넌트 추가

import ApexChart from "react-apexcharts";
<ApexChart />

다음 props들을 사용해 꾸밀 수 있습니다.
series의 이름과 데이터는 필수로 입력해야지만 차트가 나타납니다.

type
차트 유형 (String) / 기본값 ‘line’

series
차트에 표시하려는 데이터 (Array) / 기본값 undefined

width, height
차트의 너비 (String || Number) / 기본값 ‘100%’
차트의 높이 (String || Number) / 기본값 auto

options
차트의 구성 옵션 (Object) / 기본값 {}

---

React Helmet

웹 문서의 헤더 값을 변경할 때 사용하는 리액트 컴포넌트 이다.

필요한 경우

• 문서 타이틀을 변경할 때
• 소셜 서비스 포스팅할 때
• 검색엔진 최적화가 필요할 때

사용 방법

1. 명령어 실행

npm i react-helmet
npm i --save-dev @types/react-helmet

2. 타이틀을 변경하고싶은 파일에서 Helmet 컴포넌트 import

import { Helmet } from "react-helmet-async";

<Helmet>
  <title>Helmet 사용법</title>
</Helmet>

Coin Tracker 코드