반응형
추석 연휴의 시작, 새발자는 놀고먹기 전 타입스크립트를 잘 설치했다.
추석 연휴의 마지막 날, 새발자는 불러버린 배와 함께 타입스크립트를 포팅해본다.
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
반응형
'React' 카테고리의 다른 글
React(50) history.push 로 url 만 변경되고 새로고침이 안되는 이슈 (0) | 2021.10.10 |
---|---|
React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 (0) | 2021.09.25 |
TypeScript(1) 타입스크립트 설치하기 (0) | 2021.09.15 |
React(48) 타입스크립트 - 토글 메뉴에 animation 효과주기 (3) | 2021.09.14 |
React(47) div영역에 mouseover 시 버튼 보이기 (0) | 2021.09.12 |
댓글