React with TS

旅人·2023년 4월 23일

공식 HP : https://create-react-app.dev/docs/adding-typescript/

React와 typescript를 함께 사용하여 프로젝트 만들 때

이미 만든 React 프로젝트에 typescript 적용할 때는 아래와 같이

Example Code

App.tsx

import React from "react";
import Greetings from "./Greetings";
import Message from "./Message";

const App: React.FC = () => {
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return (
    <>
      <Greetings
        name="Jack"
        // mark="~!!"
        // optional="Nice to see you"
        onClick={onClick}
      />
      <Message name="Jack" />
    </>
  );
};

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;

Message.tsx

import React, { useState } from "react";
interface Msg {
  content: string;
  showMsg: boolean;
}

type MsgProps = {
  name: string;
};

function Message({ name }: MsgProps) {
  const [message, setMessage] = useState<Msg>({
    content: "",
    showMsg: false,
  });

  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setMessage({
      ...message,
      [e.target.name]: e.target.value,
    });
  };

  const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    setMessage({
      ...message,
      showMsg: true,
    });
  };

  const onClickHandler = () => {
    setMessage({
      content: "",
      showMsg: false,
    });
  };
  return (
    <>
      <div>
        <form onSubmit={onSubmitHandler}>
          <input
            type="text"
            name="content"
            placeholder="message"
            onChange={onChangeHandler}
          />
          <button type="submit">추가</button>
        </form>
      </div>
      {message.showMsg && (
        <div>
          <p>
            {name} : {message.content}
          </p>
          <button onClick={onClickHandler}>삭제</button>
        </div>
      )}
    </>
  );
}

export default Message;