State

숫자, 넘버 둘 다 사용하고 싶을 때

  const [counter, setCounter] = useState<number | string>(1);
  setCounter("안녕");

 

로그인 로직에 적용

버튼이 form 밖에 있을 경우 MouseEvent

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const { value } = event.currentTarget;
    setValue(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("안녕", value);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input value={value} onChange={onChange} type="text" placeholder="username" />
        <button>로그인</button>
      </form>
    </div>
  );
};

export default App;

 

초기값 설정

interface CoinInterface {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  is_new: boolean;
  is_active: boolean;
  type: string;
}

function Coins() {
// <CoinInterface[]> => CoinInterface가 []이라고 알려줌
  const [coins, setCoins] = useState<CoinInterface[]>([]);

  return (
    <Container>
      <Header>
        <Title>코인</Title>
      </Header>
      <CoinsList>
        {coins.map((coin) => (
          <Coin key={coin.id}>
            <Link to={`/${coin.id}`}>{coin.name} &rarr;</Link>
          </Coin>
        ))}
      </CoinsList>
    </Container>
  );
}