상태 사용하기

Tags
부가설명
똑같은데, useState 시 Generics로 타입만 전달하면 됨
 
그냥 JS로 하던 때랑 똑같은데, useState<제네릭> 으로 상태 타입을 전달하기만 하면 됨.
명시하지 않아도 알아서 타입추론으로 동작하긴함.
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState<number>(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <div>
      <h1>{count}</h1>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    </div>
  );
}

export default Counter;
 

제네릭으로 타입명시하는 것이 좋은 상황

  • null이거나 아닐 수 있는 상황
type Information = {
	name: string; 
	description: string;
};

const [info, setInformation] = useState<Information | null>(null);
  • 상태가 복잡한 형태를 띌 경우
type Todo = { 
	id: number; 
	text: string;
	done: boolean;
};

const [todos, setTodos] = useState<Todo[]>([]);