코딩애벌레

Typescript는 굉장히 까다로운 친구로, Props로 데이터를 전달 받았다면 해당하는 데이터의 타입을 정의해주어야 사용가능하다. 이때 총 3가지 방법이 있는데, 동일하게 Generic(제너릭)을 사용한다. interface / type / 직접정의 하는 방법이다. 빠르게 살펴보도록하자. /////////////// App.tsx ///////////////import React from "react";import TodoList from "./components/TodoList";const App: React.FC = () => { // ts 구간 const todos = [{ id: "1", text: "Finish the course" }]; return ( // html 구간 ..

이번엔 Saving(적금)을 해보자. Deposit(예금)과 동일하다고 생각할 수 있으나, 디테일 페이지에서 자유적립식과 정액적립식을 구분해놨기 때문에, 예금처럼 상품명 만으로는 해당 상품을 찾기 어렵다. 필요다면 Option의 데이터 정보에 자유적립인지 정액적립인지 구분하여 조건문을 통해 filter하거나 새로운 배열을 할당하면 된다. 하지만 도표는 양쪽 다 출력할 예정이기 때문에 결국 Detail을 dialog할 때는 같은 정보를 보여줄 예정이다. 즉! 적금과 똑같이 사용할 것이다. (실제 Detail 데이터는 도표기준으로 구분하지 않았다, List만 구분됨) 그리고 추가로 어제는 예상치 못했는데, dialog는 view(최상위 컴포넌트)에 변수가 존재하는데, 하위 컴포넌트에 OK 버튼이 존재하는 문..