기본 세팅

//tsx: creaate-react-app
yarn create react-app 이름 —template typescript

//styled-componenet
npm i styled-components

---

💠 useParams

URL의 파라미터 잡기

//Router.tsx
<Route path="/:coinId" element={<Coin/>}/>

//Coin.tsx
const { coinId } = useParams();

typescript → useParams를 빈 오브젝트라고 생각해서 오류 뜸

‼️ react-router-dom v6 이상 : useParams 쓰는 순간 타입이 string or undefined

✅ 해결

1) 타입 내부 선언

const { coinId } = useParams<{coinId:string}>();

2) 타입 외부 선언

interface Params {
    coinId: string;
}


function Coin() {
    const { coinId } = useParams<Params>();
    return <h1>Coin</h1>
}

→ 근데 이 방법은 에러가 뜬다 😢
아마 버전문제 ...?

⌨️ 전체 코드

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


function Coin() {
    const { coinId } = useParams<{coinId:string}>();
    return <h1>Coin: {coinId}</h1>
}
export default Coin;

---

💠 createGlobalStyle

렌더링될 때 전역에 스타일 적용

1. import

import { createGlobalStyle } from "styled-components";

⚠️ 주의

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

금지 ❌ → 하나의 element만 리턴해야함

👍 해결

<> (Fragment)

부모 없이 서로 붙어있는 것들 리턴 가능

→ 스타일이 h1에서 오는 것이 아니라 body에서 옴

💠 Reset CSS

css 기본값 제거
https://github.com/zacanger/styled-reset/blob/master/src/index.ts

const GlobalStyle = createGlobalStyle`
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
  line-height: 1;
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

💠 Google Font

https://fonts.google.com

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=League+Gothic&family=Noto+Sans+KR&display=swap');

body {
  font-family: 'Black Han Sans', sans-serif;
}

💠 기본값 세팅

* {
  box-sizing: border-box;
}
body {
  font-family: 'Black Han Sans', sans-serif;
}
a {
  text-decoration: none;
}

💠 Theme

flat UI color - 배경색 팔레트

https://flatuicolors.com/palette/gb

//styled.d.ts
import 'styled-components';

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

//theme.ts
import { DefaultTheme } from "styled-components"

export const theme: DefaultTheme = {
    bgColor:'#9c88ff',
    textColor:'#f5f6fa',
    accentColor:'#fbc531',
}

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

-> App이 ThemeProvider 안에 있기 때문에 theme에 접근 가능

//App.tsx
body {
  font-family: 'Black Han Sans', sans-serif;
  background-color: ${(props) => props.theme.bgColor};
  color: ${(props) => props.theme.textColor};
}

props 전달을 통한 스타일 적용

---

🧩 화살표 추가

<a href=””> → 페이지가 새로고침된다 …

→ ✅ 해결!

<Coin key={coin.id}>{coin.name} &rarr;</Coin>

---

🧩 <Link>

1. import

import { Link } from 'react-router-dom';

{coins.map((coin) => (
          <Coin key={coin.id}>
            <Link to={`/${coin.id}`}>{coin.name} &rarr;</Link>
          </Coin>
        ))}

//App.js
a {
  color:inherit;
}

✅ 글자 색 변하는 것 해결 → 부모에게서 색 가져오기

🧩 hover시 스타일 변화

&:hover {
    a {
        color: ${(props) => props.theme.accentColor}
    }
  }

🧩 글자 밖에서도 클릭되게 하기

a {
		display: block;
  }

➕) 사용자가 링크에 편하게 접속하도록

a {
      padding: 20px;
  }