내배캠 TIL 2023.01.18

타입스크립트로 리팩토링 타임어택

 

스파르타 강의를 다 들었지만 활용예시는 부족해서 

유튜브와 유데미 강의를 참고해서 리팩토링을 했다. 

 

처음부터 다시 깔아서 한게 아니라, 파일명을 바꿔주고 

npm install typescript

npx tsc --init  (tsconfig.json 생성) 

명령어를 넣어주었다.

 

새로 알게 된 내용

 

그래서 그런지 tsconfig.json에 주석이 많고 기본 설정이 이상하게 되어있는 것 처럼 보였다.

유데미 강의에서 tsconfig.json을 쓰는 법도 알려주는 것 같던데 강의를 봐야겠다.

제천 튜터님이 주석 처리 되어있던 jsx를 주석 풀고 react-jsx로 값을 넣어줘야 오류들을 막을 수 있다고 하셨다.

 

// "jsx": "preserve"

"jsx": "react-jsx"

 

(5) Todo List in ReactJS using TypeScript Tutorial - YouTube

 

 

children props의 타입은 ReactNode

interface에서 children 키를 구조분해 할당해서 꺼내서 쓰면 된다.

import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

const Footer = ({ children }: Props) => {
  return <div>{children} </div>;
};

export default Footer;

 

useState의 initialState에 타입을 지정해주는 법

  const [toDoList, setToDoList] = useState<Itodo[]>([]);

  const [title, setTitle] = useState<string>("");

 

써본 이벤트 타입 2가지

FormEvent

ChangeEvent

const addToDo = (event: FormEvent): void => {
    event.preventDefault();}

  const onChangeTitleHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

 

map해줄 때도 타입을 넣어줘야하는데 안 넣어준 경우에도 오류가 나지는 않았다. todoList에 initialState로 Itodo[]로 넣어놔서 그런건가?

 

자주 쓰는 인터페이스는  파일을 따로 만들어서 export 해서 가져다가 쓴다. 

//interfaces.ts
export interface Itodo {
  id: number;
  title: string;
  body: string;
  isDone: Boolean;
}

 

Props로 하위 컴포넌트로 넘겨줄 때 interface로 하나하나의 타입을 지정해주어야한다.

함수에 매개변수 타입까지 (이것을 빼먹어서 오류가 났었다)

함수에서 return값이 없다면 void타입

interface Props {
  title: string;
  body: string;
  onChangeTitleHandler(e: ChangeEvent<HTMLInputElement>): void;
  onChangeBodyHandler(e: ChangeEvent<HTMLInputElement>): void;
  addToDo(event: FormEvent): void;
}

 

 

숙련 과제를 리팩토링하는 팀원분의 코드를 같이 보면서 검색해봤는데, redux 를 썼을 때 ts로 바꿔주면서 신경써줘야하는 부분이 좀 있었다.

https://velog.io/@velopert/use-typescript-and-redux-like-a-pro

 

 

문제가 발생한 것

다른 것을 다 리팩토링하고나서 index.js를 빼먹었다는 것을 깨달아 index.ts 형식으로 바꿔주었는데 오류가 많이 났다. 

왜 그렇지?

//index.ts
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App 컴포넌트에는 FC를 붙였지만 다른 컴포넌트에는 붙이지 않았고 붙이면 오류가 났다. 근데 왜 그래야하는지 모른다.