타입스크립트2

• 타입스크립트 사용하는 리액트 프로젝트 생성(CRA)

npx create-react-app 프로젝트 명 --template typescript

App.tsx

import "./App.css";
import Greetings from "./Greetings";

function App() {
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return <Greetings name="Hello" onClick={onClick} />;
}

export default App;

Greetings.tsx

import React from "react";

type GreetingsProps = {
  name: string;
  mark: string;
  optional?: string;
  onClick: (name: string) => void; //아무것도 리턴 안함
};

function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
  const handleClick = () => onClick(name);
  return (
    <div>
      Hello, {name} {mark}
      {optional && <p>{optional}</p>}
      <div>
        <button onClick={handleClick}>Click Me</button>
      </div>
    </div>
  );
}

Greetings.defaultProps = {
  mark: "!",
};

export default Greetings;

• 타입스크립트는 렌더링할 때 필요한 props를 전부 다 쓰지 않으면 에러 발생
• 써도되고 안써도 되는 값은 ? 사용
• 특정함수 props로 받아오는 경우도 사용 가능