회원가입이나 로그인 등 여러 input이 있을 때, 각각 state로 값을 저장하면 코드가 길어지고 중복되는 코드도 많이 생기기 때문에 불편한 점이 많았다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 예전 내 코드
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [userName, setName] = useState("");
const getEmail = (e) => {
setEmail(e.target.value);
};
const getPassword = (e) => {
setPassword(e.target.value);
};
const getName = (e) => {
setName(e.target.value);
};
<input type="text" onChange={getEmail} />;
<input type="password" onChange={getPassword} />;
<input type="text" onChange={getName} />;
위의 코드를 보면 각 input의 값을 가져오는 코드의 로직이 거의 흡사하고, state도 input이 많을 수록 늘어나게 된다. 여기에 유효성 검사 로직도 들어가게 되면 코드는 더욱 늘어나게 된다!
객체 디스트럭쳐링과 name, value 속성을 이용해서 여러 input의 값을 관리할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const [inputs, setInputs] = useState({
email: "",
password: "",
userName: ""
});
// 객체 디스트럭쳐링으로 input.email이 아닌 email로 바로 사용할 수 있다.
const { email, password, userName } = inputs;
const getValue = (e) => {
// 여기서도 e.target.value가 아닌 value!
const { value, name } = e.target;
// 이전의 inputs를 복사하고, e.target.name: e.target.value로 해당 값을 변경한다.
setInputs({
...inputs,
[name]: value
});
};
// e.target.name으로 참조할 수 있도록 각 input에 name속성을 지정한다.
<input type="text" onChange={getValue} name="email" value={email} />;
<input type="text" onChange={getValue} name="password" value={password} />;
<input type="text" onChange={getValue} name="userName" value={userName} />;
이렇게 코드를 짜면 중복 코드를 줄일 수 있다. 여러개의 useState를 하나하나 따로 만드는 것 보다 훨씬 효율적인 것 같다.
상태가 객체라면
객체명.속성명 = 값이렇게 수정하면 안된다. 반드시 새로운 객체를 할당하는 방법으로 수정해야 한다.
위의 코드에서는 spread 연산자를 사용해 기존의 inputs 객체를 복사해서 새로운 객체를 할당했다.
mdn - spread 연산자
출처) 벨로퍼트와 함께하는 모던 리액트 - 9.여러개의 input 상태 관리하기
```