3장 리액트 시작하기

리액트와 타입스크립트를 이용하여 기본적인 컴포넌트를 생성하고 상태 관리를 하는 예제를 다루어 보았습니다.

1. type을 이용하여 타입을 지정해줍니다.

2. useState를 이용하여 구조 분해 할당을 통해, getter와 setter를 지정해줍니다.

3. 이벤트 핸들러를 정의하고 onClick 이벤트에 해당 함수를 넣어줍니다.

import React, { useState } from "react";
import CountryList from "./CountryList";
import styles from "./style";
import AppCssModule from "./App.module.css";
import Footer from "./Footer";
import {
  BasicButton,
  ItalicButton,
  UnderLineButton,
  WhiteUnderlineButton,
} from "./button";

export type CountryType = {
  no: number;
  country: string;
  visited: boolean;
};

const App = () => {
  const [theme, setTheme] = useState<string>("basic");
  const [msg, setMsg] = useState<string>("오늘 하루, ");

  const addResult = (x: string, y: string, z: string) => {
    return (
      <div className="card card-body bg-light mb-3">
        {x} + {y} === {z}
      </div>
    );
  };

  const [list, setList] = useState<Array<CountryType>>([
    { no: 1, country: "대한민국", visited: false },
    { no: 2, country: "멕시코", visited: true },
    { no: 3, country: "아르헨티나", visited: true },
    { no: 4, country: "브라질", visited: false },
  ]);

  const msgStateChange = () => {
    return setMsg(msg === "오늘 하루, " ? "수고했어, " : "오늘 하루, ");
  };

  const listDelete = () => {
    return setList(list.slice(1));
  };

  return (
    <div className="container">
      <button className={AppCssModule.test} onClick={msgStateChange}>
        <h2>{msg}안녕</h2>
      </button>
      <hr style={styles.dashStyle} />
      {addResult("UX", "Programming", "David")}
      <CountryList countries={list} />
      <button className="delete-btn" onClick={listDelete}>
        위부터 삭제
      </button>
      <BasicButton>기본</BasicButton>
      <ItalicButton>이텔릭</ItalicButton>
      <UnderLineButton>언더라인</UnderLineButton>
      <WhiteUnderlineButton>화이트 언더라인</WhiteUnderlineButton>
      <Footer theme={theme} />
    </div>
  );
};

export default App;
``