TypeScript(2) 타입스크립트로 포팅하기 (props, useState)

추석 연휴의 시작, 새발자는 놀고먹기 전 타입스크립트를 잘 설치했다.

추석 연휴의 마지막 날, 새발자는 불러버린 배와 함께 타입스크립트를 포팅해본다.

---

TypeScript(2) 타입스크립트로 포팅하기

리액트로 영단어 암기장을 만들었고 타입스크립트로 포팅하는 중이다. Word 라는 컴포넌트 부터 포팅해보았다.

포팅 전 자바스크립트와 포팅 후 타입스크립트의 차이를 자세히 비교해보자.

 

JavaScript vs TypeScript

 

자바스크립트로 짠 리액트 코드이다.

props를 받아오고, useState로 상태변수를 선언해주었다.

 

타입스크립트로 짠 리액트 코드를 보자.

1. 일단 props 처리를 타입스크립트로 하였다.

 

2. useState 의 상태 변수의 타입을 지정해주어야 한다. 

 

전체코드보기  - 타입스크립트 포팅 전 Word.js 

import { useState } from "react"

export default function Word({ word: w }) {
  const [word, setWord] = useState(w);
  const [isShow, setIsShow] = useState(false)
  const [isDone, setIsDone] = useState(word.isDone)

  function toggleShow() {
    setIsShow(!isShow)
  }
    
  function toggleDone() {
    fetch(`http://localhost:3001/words/${word.id}`, {
      method: "PUT",
      header: {
        'Content-Tyep': 'application/json',
      },
      body: JSON.stringify({
        ...word,
        isDone: !isDone,
      }),
    }).then(res => {
      if (res.ok) {
        setIsDone(!isDone);
      }
    });
  }

  function del(){
    if(window.confirm('삭제하시겠습니까')){
      fetch(`http://localhost:3001/words/${word.id}`, {
        method: "DELETE",
      }).then(res => {
         if (res.ok) {
           setWord({ id: 0 });
         }
      })
    }
  }

  if(word.id === 0){
    return null;
  }

  return (
    <tr className={isDone ? "off" : ""}>
      <td>
        <input type="checkbox" checked={isDone} onChange={toggleDone} />
      </td>
      <td>{word.eng}</td>
      <td>{isShow && word.kor}</td> {/* isShow true 일때만 보인다. */}
      <td>
        <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
        <button className="btn_del" onClick={del}>삭제</button>
      </td>
    </tr>
  );
}

 

전체코드보기  - 타입스크립트 포팅 후 Word.tsx

import React from "react";
import { useState } from "react";

interface Iprops {
  words: IWord;
}
interface IWord {
  id: number;
  day: string;
  eng: string;
  kor: string;
  isDone: boolean;
}
export default function Word({words: w}: Iprops){
  const [word, setWord] = useState<IWord>(w);
  const [isShow, setIsShow] = useState<boolean>(false);
  const [isDone, setIsDone] = useState<boolean>(word.isDone);
  
  function toggleShow() {
    setIsShow(!isShow); 
  }

  function toggleDone() {
    fetch(`http://localhost:3001/words/${word.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        ...word,
        isDone: !isDone,
      }),
    }).then((res) => {
      if (res.ok) {
        setIsDone(!isDone);
      }
    });
  }

  function del() {
    if (window.confirm("삭제하시겠습니까")) {
      fetch(`http://localhost:3001/words/${word.id}`, {
        method: "DELETE",
      }).then((res) => {
        if (res.ok) {
          setWord({ ...word, id: 0});
        }
      });
    }
  }

  if (word.id === 0) {
    return;
  }

  return (
    <tr className={isDone ? "off" : ""}>
      <td>
        <input type="checkbox" checked={isDone} onChange={toggleDone} />
      </td>
      <td>{word.eng}</td>
      <td>{isShow && word.kor}</td>
      <td>
        <button onClick={toggleShow}>뜻 {isShow ? "숨기기" : "보기"}</button>
        <button className="btn_del" onClick={del}>
          삭제
        </button>
      </td>
    </tr>
  );
}

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists