form과 구조분해 할당과 useState 사용하기

import React, {useState} from 'react';

interface formTypes {
	name:string;
	desc:string;
}

function Input(){
	const [form,setForm]=useState<formTypes>({name:'',desc:''});
	const {name, desc} = form;
	const onChange = (e:React.ChangeEvent<HTMLInputElement>) =>{
		const { name, value } = e.target;
		setForm({
			name:name,
			desc:value
		})

	}
	const handleSubmit=(e:React.FormEvent<HTMLFormElement>)=>{
		e.preventDefault();
		console.log('form: ',form);
		
	}
	return(
		<form onSubmit={handleSubmit}>
			{desc}
		<input name="name" value={desc} onChange={onChange}></input>
		<button type="submit">submit</button>
		</form>
	)
}

export default Input;

분석해봅시다.

type 선언

interface formTypes {
	name:string;
	desc:string;
}

interface를 선언해줍니다. useState에 type을 주는 것으로 name과 desc를 강제해줍니다.

input view 생성

	return(
		<form onSubmit={handleSubmit}>
			{desc}
		<input name="name" value={desc} onChang={onChange}></input>
		<button type="submit">submit</button>
		</form>
	)

유저로부터 입력을 받아봅시다. 기본적인 react에서 form 태그를 사용하는 방법입니다.

input 태그의 props중 필요한 것만 골라서 사용하면 됩니다.

onChange fn

	const onChange = (e:React.ChangeEvent<HTMLInputElement>) =>{
		const { name, value } = e.target;
		setForm({
			name:name,
			desc:value
		})

	}

onChange 함수의 기본 parameter인 event 객체를 React.ChangeEvent<HTMLInputElement> 타입으로 받아줍니다.
이를 state에 저장해줍니다.

onSubmit

	const handleSubmit=(e:React.FormEvent<HTMLFormElement>)=>{
		e.preventDefault();
		console.log('form: ',form);
	}

submit 함수도 마찬가지로 event 객체를 React type으로 받아줍니다.
React.FormEvent<HTMLFormElement> 나머지는 그냥 react처럼 사용하면 됩니다.