react를 사용하여 웹 사이트를 만들 때 변수가 필요하면 useState 함수를 통해서 state 변수를 선언하여 변수를 관리하고 동시에 리렌더링의 이점을 가져왔다.
state 변수가 필요한 가장 대표적인 상황이 바로 유저들의 입력을 받아서 해당 내용을 가지고 작업을 해야하는 경우이다. 기본적으로 유저에게 값을 입력받기 위해서는 input 태그를 활용하고 해당 태그에 onChange 함수를 연동하여 event.target.value의 값을 setState 함수에 넣어 값을 저장했다.
아래는 위의 과정을 정리해놓은 코드이다.
export default function InputManagement() {
const [ id, setId ] = useState("")
const [ name, setName ] = useState("")
const [ password, setPassword ] = useState("")
const onChangeId = (e) => {
setId(event.target.value)
}
const onChangeName = (e) => {
setName(event.target.value)
}
const onChangePassword = (e) => {
setPassword(event.target.value)
}
return (
<div>
<div>id : <input onChange={onChangeId} /></div>
<div>name : <input onChange={onChangeName} /></div>
<div>password : <input onChange={onChangePassword} /></div>
</div>
)
}과정 자체는 input 태그의 개수만큼 state 변수를 선언하고, 같은 숫자만큼 onChange 함수를 선언하여 input 태그의 onChange와 연동시키는 것으로 정리된다.
따라서 코드 자체는 쉽게 작성이 가능하지만, input 태그의 개수만큼 state 변수, onChange 함수의 개수가 배로 증가한다는 단점이 있다.
하나의 input에 연동되는 onChange가 모두 다른 함수이기 때문에 한번에 관리하기가 어렵다는 단점이 있고, 다른 파일로 props를 내릴 때, 관련된 모든 내용을 하나하나 작성해줘야하기 때문에 관리가 어렵다.
이런 단점을 보완하기 위해서 input 태그들에 대한 state 변수를 하나로 줄이고 onChange 함수 또한 하나의 onChange 함수로 모든 input 태그를 관리하도록 코드를 작성한다.
해당 과정에는 state 변수를 객체의 형태로 선언하여 로직을 구현한다.
export default function InputManagement() {
const [ inputs, setInputs ] = useState({
id: "",
name: "",
password: ""
})
const onChange = (e) => {
const { name, value } = e.target
setInputs({
...inputs,
[name]: value
})
}
return (
<div>
<div>
id : <input name="id" onChange={onChange} />
</div>
<div>
name : <input name="name" onChange={onChange} />
</div>
<div>
password : <input name="password" onChange={onChange} />
</div>
</div>
)
}위와 같이 작성하여 하나의 onChange 함수로 여러 input 창을 관리할 수 있다.
로직 자체는 간단하게 객체의 키값쌍은 같은 키로 값을 입력할 때, 먼저 입력된 키-값쌍은 무시되고 나중에 입력한 키-값쌍이 저장되는 특성을 통해서 구현한다.
input 태그의 name 영역과 value 영역을 객체의 키-값쌍으로 사용한다. input 태그의 onChange에 onChange 함수를 연결하고 함수 내부에서 event.target에서 name과 value를 뽑아 해당 값들을 키-값쌍으로 state 객체의 값을 변경한다.
setInputs를 할 때, spread 연산자를 사용해야 하는 것을 주의하며 진행한다.
react에서는 객체의 값을 변경할 때 inputs[name] = value와 같은 방법으로 변경하지 않고 setState 함수를 활용해서 변경을 한다. 따라서 spread 연산자를 활용해서 이미 가지고 있는 데이터를 다시 넣어주고, 중복되는 키에 대해서만 값을 변경시키는 방법으로 객체의 값을 수정한다.
