React - TypeScript: React에서 사용해보기

타입스크립트 적용된 프로젝트 설치

npx create-react-app ts-react-tutorial --template typescript

 

1. 컴포넌트에 type 적용해보기

App.tsx

import './App.css';
import Greeting from './components/Greeting';

function App() {
  const name:string = "kim jun ho" // 이름 = string
  const height:number = 120; // 키 = number
  return (
    <div className="App">
    // props로 받는쪽에서 string, number를 지켜줘야지 props가 무사히 넘어간다
     <Greeting name={name} height={height}/> 
    </div>
  );
}

export default App;

 

Greeting.tsx

import React from 'react'

// Props에 들어오는 타입을 정한다
type GreetingProps = {
    name: string,
    height: number
}

/ FC는 그냥 function component 의 약자로, 이게 함수형이다 라는 뜻
const Greeting: React.FC<GreetingProps> = ({name, height}) => {
  return (
    <div>
        <p>Greeting! I am {name}</p>
        <p>My Height is  {height}</p>
    </div>
  )
}

export default Greeting

 

2. State에 type 적용

import './App.css';
import {useState} from 'react'

function App() {
	// <number>로 타입을 적용한다
  const [count, setCount] = useState<number>(0);
  
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <div className="App">
     <h1>{count}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

 

3. 이벤트에 type 적용

import React, { useState } from 'react';

import './App.css';

// 인터페이스
interface Item {
  id: number;
  name: string;
  price: number;
}

// PRODUCTS 는 item 객체를 배열로 갖는다.
const PRODUCTS: Item[] = [
  {
    id: 1,
    name: 'Apple',
    price: 1,
  },
  {
    id: 2,
    name: 'Book',
    price: 5,
  },
  {
    id: 3,
    name: 'Banana',
    price: 0.5,
  },
  {
    id: 4,
    name: 'Table',
    price: 200,
  },
  {
    id: 5,
    name: '리액트책',
    price: 0,
  }
];

// App 은 React 함수형 컴포넌트이다
const App: React.FC = () => {

  // query는 문자열이다
  const [query, setQuery] = useState<string>('');
  // 결과값은 Item배열이 들어오거나, undefined가 들어온다.
  const [result, setResult] = useState<Item[] | undefined>();

  // Input핸들러는 ChangeEvent<HTMLInputElement> - html input 값에따라 타입이 변한다. *********************** 중요
  const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    const enteredName = event.target.value;
    setQuery(enteredName);
  };

  // search 함수는 PRODUCTS 배열에서 query(검색된값) 이 있는애를 필터링해서 보여준다.
  // **** 중요!! 검색할때는 배열안의 단어, input창의 검색값 모두를 소문자 혹은 대문자로 만들자!
  const search = () => {
    const foundItems = PRODUCTS.filter((item) =>
      item.name.toLowerCase().includes(query.toLowerCase())
    );
    setResult(foundItems);
  };

  return (
    <div className="container">
      <div className="wrapper">
        <input
          value={query}
          onChange={inputHandler}
          placeholder="Search products"
          className="input"
        />

        <button onClick={search}>Search</button>
      </div>

      {/* Display search result */}
      <div className="search-result">
        {result && result.length > 0 ? (
          result.map((item) => (
            <li key={item.id} className="item">
              <span className="item-id">{item.id}</span>
              <span className="item-name">{item.name}</span>
              <span className="item-price">{item.price}$</span>
            </li>
          ))
        ) : (
          <h2>No items found!</h2>
        )}
      </div>
    </div>
  );
};

export default App;