[TS + React] 원래 가지고 있는 state와 props로 받는 state가 다를 때

프론트엔드 스터디에 참여하기 시작하면서 TodoMVC라는 걸 리액트와 타입스크립트의 조합으로 구현해보고 있다. 타입스크립트에 대한 아주 얕은 기본 지식만 있는 상태에서 쓰려니 VS code에서 계속 마주하게 되는 에러들. 

 

오늘 문서를 참고하며 기능구현을 하다가 내가 마주한 에러는 이것. 

// App.tsx

import React, { useState } from 'react';
import Header from 'components/Header';
import Main from 'components/Main';
import Footer from 'components/Footer';

const App = () => {
  const [todoList, setTodoList] = useState([]);

  return (
    <section className="todoapp">
      <>
        <Header addTask={setTodoList} />
        <Main todoList={todoList} />
        <Footer />
      </>
    </section>
  );
};

export default App;

Header 컴포넌트에 props로 넘겨준 addTask 부분에 빨갛게 물결표시로 에러가 표시되었다. 원래 useState에 todo가 어떻게 보여지는 지 보려고 기본 값을 설정해주었는데, 그 배열을 비웠더니 저렇게 에러 표시가... Header에 넘겨준 setTodoList 함수는 어찌어찌 구글링해서 타입을 넣어주었는데 여기서만 에러가 나는 상황. 어떻게 고쳐야할 지 몰라 리더님께 질문을 했더니 useState의 타입을 정해주지 않았기 때문이라는 간단한 답변을 받았다.

 

const [todoList, setTodoList] = useState<ITodo[]>([]);

그래서 global.d.ts 파일에 넣어둔 interface ITodo를 빈 배열로 표시했더니 에러는 사라졌다.

 

 

 

---

 

 

 

• 중복되는 코드를 전역에서 사용하고 싶을 때, global.d.ts

interface ITodo가 계속 다른 곳에서도 중복으로 사용되길래 어떻게 할까 고민하던 중 다른 분의 포스팅을 보니 이거 자체를 .ts 파일의 컴포넌트로 import, export해서 사용하더라. 그래서 아하- 이렇게 사용하면 되겠구나 싶었는데 내 코드를 보더니 리더님이 global로 사용하는 건 어떻겠느냐 하셔가지고 또 구글링을 해봄.

 

그야말로 전역에서 쓰일 경우 global.d.ts를 생성하고 안에 넣어놓고 쓰면 import나 export할 필요없이 전역으로 사용할 수 있었다. 그래서 해당 types.ts를 없애고 global.d.ts에 코드를 옮겨주었다.

// global.d.ts

interface ITodo {
  id: string;
  task: string;
  completed: boolean;
}