[typescript]react - typescript(설치, useState)

설치(cmd) 

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

VScode 에디터에서 터미널 열고 설치

npm install -g typescript

 

1. props 전달시 props 타입을 interface로 지정해야한다.

 

ex)

interface HelloProps = {
	name: string
}
const Hello ({name}: HelloProps) => {}

2.상태의 타입의 지정

const [state, setState] = useState<number>(0)

상태타입이 변경되지 않는 경우는 제네릭 타입 생략해도됨
상태가 null일수도 있고 아닐수도 있을 때 제네릭을 활용하여 지정

ex)

type stateobject = {name: string, age: number}
const [state, setState] = useState<null | stateobject>(null)

 

3.이벤트 객체의 타입 지정

 

● onChange시 이벤트 객체의 타입

React.ChangeEvent<HTMLInputElement>

onchange 이벤트에 마우스 올리면 나옴 그대로 복사!!!(Handler만 지워줄것)

 

● onSubmit 이벤트 객체의 타입

React.FormEvent<HTMLFormElement>

onchange와 비슷함 마우스 올리면 나옴 그대로 복사!!!(Handler만 지워줄것)

 

실습

 

 

 

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './components/Hello';
import Counter from './components/Counter';
import MyForm from './components/MyForm';


function App() {
  const onClick = (name: string) =>{
    console.log(`${name}hi`)
  }
  const onFormSubmit = (form:{name: string, desc: string}) => {
    console.log(form)
  }
  return (
    <div className="App">
      <Hello name="green" message="안녕하세요" onClick={onClick}/>
     // hollo 컴퍼넌트에 name, message, onclick props 로 전달
      <Counter/>
      <MyForm onFormSubmit={onFormSubmit}/>
      //MyForm 컴포넌트에 onFormSubmit props로 전달
    </div>
  );
}

export default App;

 

components 폴더 생성

Hello.tsx

import React from 'react';


interface HelloProp {
    name: string;
    message?: string;
    onClick: (name: string)=> void; // 리턴하지 않는다
}

//props로 전달시 props타입을 interface로 지정해야함

const Hello = ({name,message, onClick}: HelloProp) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>{message}</p>
            <div>
                <button onClick={()=>onClick(name)}>클릭하세요</button>
            </div>
        </div>
    );
};

export default Hello;

props로 전달시 props타입을 interface로 지정해야함

(name, message, onClick 를 props로 전달 받음!!! interface 지정!!!!!!!!!)

Counter.tsx

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState<number>(0);
    const onIncrease = () => setCount(count + 1);
    const onDecrease = () => setCount(count - 1);
    return (
        <div>
            <h2>{count}</h2>
            <div>
                <button onClick={onIncrease}>+</button>
                <button onClick={onDecrease}>-</button>
            </div>
        </div>
    );
};

export default Counter;

 

MyForm.tsx

import React, { useState } from 'react';

//프롭스로 받기전에 타입 선언 해줘야함
type MyFormProps = {
    onFormSubmit: (form:{name: string; desc: string}) => void;
}

const MyForm = ({onFormSubmit}: MyFormProps) => {
    const [formData, setFormData] = useState({
        name: "",
        desc: ""
    })
    const onChange = (e:React.ChangeEvent<HTMLInputElement>) => {
        const {name, value} = e.target;
        setFormData({
            ...formData,
            [name] : value
        })
    }
    //submit버튼 클릭시 실행
    const onSubmit = (e:React.FormEvent<HTMLFormElement>) => { //무슨타입인지 몰라서 설정해줌
        //연결된 이벤트 제거
        e.preventDefault();
        onFormSubmit(formData);
        setFormData({
            name: "",
            desc: ""
        })
    }
    return (
        <div>
            <form onSubmit={onSubmit}>
                <input name="name" value={formData.name} onChange={onChange}/>
                <input name="desc" value={formData.desc} onChange={onChange}/>
                <button type='submit'>등록</button>
            </form>
        </div>
    );
};

export default MyForm;

props로 전달시 props타입을 interface로 지정해야함

여기서는 상태 타입 지정사용함 2번 확인

(onFormSubmit 를 props로 전달 받음!!! interface 지정!!!!!!!!!)