Next
useState
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 기존
const [id, setId] = useState<string>();
const [pass, setPass] = useState<string>();
const idHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const target = event.target.value;
setId(target);
}
const passHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const target = event.target.value;
setPass(target);
}
<input id="id" onChange={idHandler}/>
<input id="pass" onChange={passHandler}>
useState도 객체형으로 사용할 수 있다.- 두 개의
useState로 사용하는 것이 아닌, 하나의 상태 관리에 키 값을 달리하여 관리한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
type Data = {
[key: string]: string;
}
const [userInfo, setUserInfo] = useState<Data>({
id: "",
pass: "",
});
const userInfoHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
const {name, value} = event.target;
setId(prev => {
...prev,
[name] : value,
});
}
<input id="id" name="id" onChange={userInfoHandler}/>
<input id="pass" name="pass" onChange={userInfoHandler}>
- 첫 번째 코드와 두 번째 코드는 사용자 정보를 어떻게 관리하냐는 차이가 있다.
- 첫 번째 코드는 각각 별도의 상태로 관리하고 있으며, 두 개의 상태를 사용해야 해서 복잡하고 만약 사용자의 정보를 바탕으로 어떠한 기능을 하는 코드가 있을 때 추가적인 처리 로직이 필요할 수 있다.
- 반면, 두 번째 코드는 하나의 객체로 사용자의 정보를 관리하기 때문에 코드가 단순해지고 관리가 쉽다는 이점이 있다.
name에 따라 값을 바꿔 관리한다.