TypeScript와 React

📌 TypeScript와 React 함께 사용하기

🔗 React-TypeScript CheatSheets

📖 React + TypeScript 프로젝트 설정하기

• 설치 : sudo npm install -g create-react-app
• 시작하기 : create-react-app my-app --template typescript

📖 Props으로 작성하기 & Props의 타입

💎 App.tsx

import React from "react";
import TodoList from "./components/TodoList";

function App() {
  const todos = [{ id: "t1", text: "Finish the course" }];
  return (
    <div className="App">
      <TodoList items={todos} />
    </div>
  );
}

export default App;

💎 TodoList.tsx

import React from "react";

interface TodoListProps {
  items: { id: string; text: string }[];
}

// const TodoList: React.FC<TodoListProps> = (props) => {
//   return (
//     <ul>
//       {props.items.map((todo) => (
//         <li key={todo.id}>{todo.text}</li>
//       ))}
//     </ul>
//   );
// };

// export default TodoList;

export default function TodoList({ items }: TodoListProps) {
  return (
    <ul>
      {items.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

📖 ref로 사용자 입력 받기

import { FormEvent, useRef } from "react";

export default function NewTodo() {
  const textInputRef = useRef<HTMLInputElement>(null);

  function todoSubmitHandler(event: FormEvent) {
    event.preventDefault();
    const enteredText = textInputRef.current!.value;
    console.log(enteredText);
  }
  return (
    <form onSubmit={todoSubmitHandler}>
      <div>
        <label htmlFor="todo-text">Todo Text</label>
        <input type="text" id="todo-text" ref={textInputRef} />
      </div>
      <button type="submit">+ ADD TODO</button>
    </form>
  );
}

📖 Cross-Component 커뮤니케이션

💎 App.tsx

import React from "react";
import TodoList from "./components/TodoList";
import NewTodo from "./components/NewTodo";

function App() {
  const todos = [{ id: "t1", text: "Finish the course" }];

  const todoAddHandler = (text: string) => {
    console.log(text);
  };

  return (
    <div className="App">
      <NewTodo onAddTodo={todoAddHandler} />
      <TodoList items={todos} />
    </div>
  );
}

export default App;

💎 NewTodo.tsx

import { FormEvent, useRef } from "react";

type NewTodoProps = {
  onAddTodo: (text: string) => void;
};

export default function NewTodo({ onAddTodo }: NewTodoProps) {
  const textInputRef = useRef<HTMLInputElement>(null);

  function todoSubmitHandler(event: FormEvent) {
    event.preventDefault();
    const enteredText = textInputRef.current!.value;
    onAddTodo(enteredText);
  }
  return (
    <form onSubmit={todoSubmitHandler}>
      <div>
        <label htmlFor="todo-text">Todo Text</label>
        <input type="text" id="todo-text" ref={textInputRef} />
      </div>
      <button type="submit">+ ADD TODO</button>
    </form>
  );
}

📖 상태(State) 및 타입 작업하기

💎 App.tsx

import { useState } from "react";
import TodoList from "./components/TodoList";
import NewTodo from "./components/NewTodo";
import { Todo } from "./todo.model";

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  // const todos = [{ id: "t1", text: "Finish the course" }];

  const todoAddHandler = (text: string) => {
    setTodos((prevTodos) => [
      ...prevTodos,
      { id: Math.random().toString(), text: text },
    ]);
  };

  return (
    <div className="App">
      <NewTodo onAddTodo={todoAddHandler} />
      <TodoList items={todos} />
    </div>
  );
}

export default App;

💎 todo.model.ts

export interface Todo {
  id: string;
  text: string;
}

📖 더 많은 Props 및 상태 작업

💎 App.tsx

import { useState } from "react";
import TodoList from "./components/TodoList";
import NewTodo from "./components/NewTodo";
import { Todo } from "./todo.model";

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  // const todos = [{ id: "t1", text: "Finish the course" }];

  const todoAddHandler = (text: string) => {
    setTodos((prevTodos) => [
      ...prevTodos,
      { id: Math.random().toString(), text: text },
    ]);
  };

  const todoDeleteHandler = (todoId: string) => {
    setTodos((prevTodos) => {
      return prevTodos.filter((todo) => todo.id !== todoId);
    });
  };

  return (
    <div className="App">
      <NewTodo onAddTodo={todoAddHandler} />
      <TodoList items={todos} onDeleteTodo={todoDeleteHandler} />
    </div>
  );
}

export default App;

💎 TodoList.tsx

interface TodoListProps {
  items: { id: string; text: string }[];
  onDeleteTodo: (todoId: string) => void;
}

export default function TodoList({ items, onDeleteTodo }: TodoListProps) {
  return (
    <ul>
      {items.map((todo) => (
        <li key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={onDeleteTodo.bind(null, todo.id)}>DELETE</button>
        </li>
      ))}
    </ul>
  );
}

• onDeleteTodo.bind(null,todo.id) 대신 ()=>onDeleteTodo(todo.id)로 대체 가능.

📖 스타일링 추가

• TodoList.tsx, NewTodo.tsx에 각각 import './TodoList.css', import './NewTodo.css' 추가

📖 다른 React 기능의 타입

🔗 Redux Toolkit
🔗 @types/react-router-dom