[TypeScript]나만 보는 TypeScript 기초 메모장

"자바스크립트"와 "타입스크립트"의 차이점 : 타입 유무

  const message = "hello";
  console.log(message);

  const message1: string = "hello2";
  console.log(message1);
  //message: string은 message가 문자열 타입임을 명시.

---

React.FC : 리액트 컴포넌트 타입

import React from "react";

const HelloWorld: React.FC = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

props의 전달 방식( Props란? )

import React from "react";

type HelloWorldProps = {
  name: string; //name이라는 문자열 타입의 props
}

const HelloWorld: React.FC<HelloWorldProps> = ({ name }) => {
  return <h1>Hello, World! {name}!</h1>;
};

export default HelloWorld;

HelloWorld name="John"처럼 App 컴포넌트에서 name prop을 전달(타입은 문자열!!)

import React from "react";
import MemoPad from "./components/HelloWorld";

const App: React.FC = () => {
  return (
    <div>
      <HelloWorld name="John" />
    </div>
  );
};

export default App;

 

---

  let age: number = 25; //정수
  let name1: string = "JOHN"; //문자열
  let isOnline: boolean = true; //논리
  let numbers: number[] = [1,2,3]; // 정수 배열
  let person: {name2 : string; age : number} = { name2: "Alice", age: 30}; // 문자 배열
  function add(a: number, b: number): number { 
    return a + b;
  }; // 함수

---

간단한 컴포넌트

import React from "react";

type MemoPad = {
  name: string; // name이라는 문자열 타입의 props
};

const MemoPad: React.FC<MemoPad> = ({ name }) => {
  return <h1>Hello, World! {name}!!</h1>;
};

export default MemoPad;

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

const App: React.FC = () => {
  return (
    <div>
      <MemoPad name="John" />
    </div>
  );
};

export default App;

출력 화면

---

리스트 만들기

import React from "react";

type TodoItemProps = {
  task: string; // 할 일 내용
};

const TodoItem: React.FC<TodoItemProps> = ({ task }) => {
  return <li>{task}</li>;
};

export default TodoItem;

import React, { useState } from "react";
import TodoItem from "./TodoItem";

const TodoList: React.FC = () => {
  const [tasks, setTasks] = useState<string[]>([]);
  const [input, setInput] = useState<string>("");

  const addTask = () => {
    if (input.trim() === "") return;
    setTasks([...tasks, input]); //스프레드 연산자(기존 배열 그대로 복사) 
    setInput(""); //입력창 빈입력값으로 업데이트
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text" //타입선언
        value={input} //입력한 값
        onChange={(e) => setInput(e.target.value)} //입력한 순간 동작
        placeholder="Add a task" //인터페이스
      />
      <button onClick={addTask}>Add</button>
      <ul>
        {tasks.map((task, index) => (
          <TodoItem key={index} task={task} /> //index : 0,1,2,3,.. task : 입력값
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

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

const App: React.FC = () => {
  return (
    <div>
      <TodoList />
    </div>
  );
};

export default App;

 

useState란?

React에서는 컴포넌트가 데이터를 기억하려면 상태(state)를 관리. 이때 useState라는 훅(Hook)을 사용합니다.

const [input, setInput] = useState<string>("");

• input: 현재 상태 값
• setInput: 상태 값을 업데이트하는 함수
• useState<string>(""): 초기 값은 빈 문자열

이벤트 처리

React에서는 사용자 이벤트(버튼 클릭, 입력 등)를 다룸

<input type="text" value={input} onChange={(e) => setInput(e.target.value)} />

 

• onChange={(e) => setInput(e.target.value)} : 사용자가 입력한 값이 변경될 때마다 상태 값 input이 업데이트

 

<button onClick={addTask}>Add</button>

• onClick={addTask} : 버튼이 클릭되었을 때 addTask 함수가 호출

map 함수

React에서는 리스트를 렌더링할 때 map 함수를 사용

const [tasks, setTasks] = useState<string[]>([]);
  
{tasks.map((task, index) => (
          <TodoItem  key={index} task={task} />
        ))}

• tasks.map(...) : tasks 배열의 각 항목에 대해 TodoItem 컴포넌트를 렌더링합니다.
• key={index} : 각 항목에 고유한 키를 설정