타입스크립트 쌩기초

코딩앙마 리액트 17강 부록을 들으면서 정리했던 내용.

• 프롭스 입력받기
  Word.tsx열기
  interface IProps {}
export default function Word({ word: w }: IProps)
  이후 IPros에 프로퍼티와 프로퍼티 타입을 추가해준다.

interface IProps {
  word: any;
}

Type을 any로 쓰는 것은 권장하지 않는다.
새로운 인터페이스를 만들고, 테이터마다 타입을 지정해준다.
이처럼 interface는 한 번에 여러개의 값의 타입을 지정해줄 수 있다.

    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": false
    },

interface IProps {
  word: IWord;
}

interface IWord {
  day: string;
  eng: string;
  kor: string;
  isDone: boolean;
  id: number;
}

이제 word.을 입력하면 word에 있는 프로퍼티와, 해당 프로퍼티의 자료형에 맞는 메서드와 프로퍼티를 사용할 수 있다.

이때 기존의 function del()을 통해 자료를 삭제한다. 특정값을 동적으로 받기 위해서는 값에 물음표를 추가한다.

interface IWord {
  day?: string;
  eng?: string;
  kor?: string;
  isDone?: boolean;
  id: number;
}

그런데 이렇게 하면 입력할 때에도 일부 값을 누락시킬 수 있는 문제가 있다. 때문에 del값에서 id값은 변경하면서 나머지는 기존 word객체를 스프레드해서 복사하도록 함이 바람직하다.

interface IWord {
  day: string;
  eng: string;
  kor: string;
  isDone: boolean;
  id: number;
}

  function del() {
    if (window.confirm("삭제 하시겠습니까?")) {
      }).then(res => {
        if (res.ok) {
          setWord({
            ...word,
            id: 0,
          });

• Day 컴포넌트 수정하기.
  Word.tsx에서 만든 IWord 인터페이스를 export하자.

export interface IWord {
  day: string;
  eng: string;
  kor: string;
  isDone: boolean;
  id: number;
}

Day.tsx에서 이 인터페이스를 사용할 수 있게 된다.
import Word, { IWord } from "./Word";

const words: IWord[] = useFetch(`http://localhost:3001/words?day=${day}`);

한편 Params에서 받는 객체를 타입스크립트는 빈객체로 인식하고 있다. 명확하게 지정해주자.
const { day } = useParams();
const { day } = useParams<{ day: string }>();
꺽쇠<>는 제너릭이라 부르는데, 어떤 타입을 사용할지를 넘겨주는 요소이다.

• DayList 수정하기
  인터페이스 만들기

export interface IDay {
  id: number;
  day: number;
}

days에 타입 추가하기
const days: IDay[] = useFetch("http://localhost:3001/days");

• CreateWord 수정하기
  변수에 타입 추가
  const days: IDay[] = useFetch("http://localhost:3001/days");

이벤트에 타입 추가
function onSubmit(e: React.FormEvent)...이런건 타입스크립트 커뮤니티에 찾아가면서 외워야함.. ㅎ

useRef 수정하기
POST의 body에 있는 useRef객체들은 현재 Current로 되어 있다. 이런 경우 값이 삭제될 우려가 있어 타입스크립트에서 경고문을 보여준다. 각 form의 각 타입에 맞게 HTML element 타입을 제너릭으로 입력해준다.

  const engRef = useRef<HTMLInputElement>(null);
  const korRef = useRef<HTMLInputElement>(null);
  const dayRef = useRef<HTMLSelectElement>(null);

POST 수정하기
Ref중 하나라도 없으면 POST를 실행하지 않도록 if 조건문을 수정한다.
if (!isLoading && dayRef.current && engRef.current && korRef.current)
이후 body로 넘기는 객체들을 상수로 먼저 입력받은 body 태그에서 사용하도록 식별자를 이용해 수정한다.

    if (!isLoading && dayRef.current && engRef.current && korRef.current) {
        setIsLoading(true);
        const day = dayRef.current.value;
        const eng = engRef.current.value;
        const kor = korRef.current.value;
        fetch(`http://localhost:3001/words/`, {
            body: JSON.stringify({
                day,
                eng,
                kor,
                isDone: false,
            }),
        })
    }

• useFetch 수정하기
  useFetch는 jsx를 반환하지 않으니 확장자명을 ts로 수정한다.
  타입스크립트를 적용할 부위는 아래 한 줄
  export default function useFetch(url: string)

• npm start 입력하기
  바뀐 확장자 파일이름들은 npm start를 입력해 다시 시작하면 적용된다.