[Meet Errors] React + TypeScript에서 useState에 타입 지정 후 발생하는 possibly undefined 에러 해결

Error

useState에 generic으로 TodoType[] 타입을 주었을 때 에러가 발생했습니다.

현재 코드 상황은 다음과 같습니다.

export interface TodoType {
  id: number
  text: string
  isChecked: boolean
}

function App() {
  const [text, setText] = useState('')
  const [todos, setTodos] = useState<TodoType[]>()

  const handleTextChange = (text: string) => {
    setText(text)
  }

  const handleSubmit = () => {
    console.log('submit')
  }

  return (
    <main className="App">
      <TodoHeader />
      <TodoInput text={text} onTextChange={handleTextChange} onSubmit={handleSubmit} />
      <TodoListArea todoCount={todos.length}>
        <TodoListTools />
        <Divider />
        <TodoList todos={todos} />
      </TodoListArea>
    </main>
  )
}

다음과 같은 오류가 발생합니다.

'todos가 undefined일 수도 있다.' 라는 에러가 발생합니다.

Solution

해결 방법은 useState에 빈 배열이라도 인자로 넣어주면 해결 가능합니다. 제네릭으로 우리가 타입을 명시해줬기 때문에, 어떤 값도 초기값으로 넣어주지 않으면 undefined일수도 있다는 에러를 보여줍니다.

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