이번 포스팅에서는 리액트에서 input 태그가 여러 개일 때 상태를 관리하는 방법에 대하여 알아보려고 한다.
리액트에서는 아래와 같이 하나의 input당 state를 설정하는 방식으로 input을 관리할 수 있다.
import React, { useState } from 'react';
const InputSample = () => {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [input3, setInput3] = useState('');
const onChange1 = (e) => {
setInput1(e.target.value);
};
const onChange2 = (e) => {
setInput2(e.target.value);
};
const onChange3 = (e) => {
setInput3(e.target.value);
};
return (
<div>
<input type="text" value={input1} onChange={onChange1} />
<input type="text" value={input2} onChange={onChange2} />
<input type="text" value={input3} onChange={onChange3} />
</div>
);
}
export default InputSample;input이 여러 개가 됐을 때에는, 단순히 useState와 onChange를 여러 번 사용해서 구현할 수도 있다. 하지만 그렇게 좋은 방법은 아니다.
만약 input이 수십 개 수백 개가 된다면, 코드의 가독성이 떨어질 뿐만 아니라 매우 비효율적일 것이다.
따라서, 다음과 같이 하나의 state로 input의 값들을 관리해주어야 한다.
input에 name을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다.
그리고, useState에서는 문자열이 아닌 객체형으로 관리하도록 해주어야 한다.
import React, { useState } from 'react';
const InputSample = () => {
const [inputs, setInputs] = useState({
input1: '',
input2: '',
input3: '',
});
const { input1, input2, input3 } = inputs;
const onChange = (e) => {
const { name, value } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
return (
<div>
<input type="text" name="input1" value={input1} onChange={onChange} />
<input type="text" name="input2" value={input2} onChange={onChange} />
<input type="text" name="input3" value={input3} onChange={onChange} />
</div>
);
}
export default InputSample;우선, input에 name이라는 props를 설정하고 inputs라는 상태를 만들어서 setInputs로 input의 값들을 제어한다.
그리고 input1, input2, input3을 쉽게 사용할 수 있도록 비구조화 할당을 이용하여 변수를 간단하게 표현한다.
사용자가 input에 값을 입력하면 onChange 함수가 값이 바뀔 때마다 객체 spread 방식으로 값을 Update 해줄 것이다.
