Counter.tsx
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState<number>(0);
const onIncrease = () => setCount(count + 1);
const onDecrease = () => setCount(count - 1);
return (
<div>
<h1>{count}</h1>
<div>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
</div>
)
}
export default Counter;
App.tsx
import React from 'react';
import './App.css';
import Counter from './Counter';
function App() {
return (
<Counter />
);
}
export default App;
<number>
() 처럼 제네릭으로 해당 상태가 어떤 타입을 가질지 설정하기만 하면 된다.type Information = { name: string; description: string };
const [info, setInformation] = useState<Information | null>(null);
type Todo = { id: number; text: string; done: boolean };
const [todos, setTodos] = useState<Todo[]>([]);
type Todo = { id: number; text: string; done: boolean };
const [todos, setTodos] = useState([] as Todo[]);
import React, { useState } from 'react';
type MyFormProps = {
onSubmit: (form: { name: string; description: string }) => void;
};
function MyForm({ onSubmit }: MyFormProps) {
const [form, setForm] = useState({
name: '',
description: ''
});
const { name, description } = form;
const onChange = (e: any) => {
};
const handleSubmit = (e: any) => {
};
return (
<form onSubmit={handleSubmit}>
<input name="name" value={name} onChange={onChange} />
<input name="description" value={description} onChange={onChange} />
<button type="submit">등록</button>
</form>
);
}
export default MyForm;
import React, { useState } from "react";
type MyFormProps = {
onSubmit: (form: { name: string; description: string }) => void;
};
function MyForm({onSubmit}: MyFormProps){
const [form, setForm] = useState({name:'', description: ''});
const {name, description} = form;
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setForm({
...form,
[name]: value
})
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
onSubmit(form);
setForm({
name: '',
description: ''
}); // 초기화
}
return(
<form onSubmit={handleSubmit}>
<input name='name' value={name} onChange={onChange} />
<input name='description' value={description} onChange={onChange} />
<button type="submit">등록</button>
</form>
);
}
export default MyForm;
import React from 'react';
import './App.css';
import Counter from './Counter';
import MyForm from './MyForm';
function App() {
const onSubmit = (form: {name: string; description: string}) => {console.log(form)}
return (
<MyForm onSubmit={onSubmit} />
);
}
export default App;
import React, { useReducer, useState } from "react";
// action을 |로 연달아 나열
type Action = {type:'INCREASE'} | {type: 'DECRESE'};
function reducer(state: number, action: Action): number{
switch (action.type){
case "INCREASE":
return state + 1;
case "DECRESE":
return state - 1;
default:
throw new Error('Unhandled action');
}
}
function Counter() {
const [count, dispatch] = useReducer(reducer, 0);
const onIncrease = () => dispatch({type: 'INCREASE'});
const onDecrease = () => dispatch({type: 'DECRESE'});
return (
<div>
<h1>{count}</h1>
<div>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
</div>
)
}
export default Counter;