회원가입 페이지 같은 화면은 한 페이지 안에 입력할 요소가 많이 존재한다.
여러개의 input에 여러개의 state를 선언하면 코드가 길어지고 복잡해진다.
이럴 경우 여러개의 input에 한번에 state를 선언하면 된다.
구현 화면
이름, 이메일, 전화번호에 state를 선언하고, 저장된 값을 하단에 출력해보았다.
App.jsx
import React, { useState } from 'react'
import './App.css'
function App() {
//여러가지 input값을 한번에 선언할 때, useState 인자를 object 형태로 선언하고 key-value 작성
const [inputs, setInputs] = useState( {name:"", email:"", tel:""} );
//ES6문법의 destructuring 을 이용하여 inputs 객체를 분해한다.
//좌측에는 객체의 key와 동일한 이름으로 일반 변수로 선언한다.
const {name, email, tel} = inputs;
const inputChange = (e) => {
const id = e.target.id;
const value = e.target.value;
//inputs를 깊은복사 후, 특정 id의 value를 바꿔서 업데이트
setInputs({...inputs, [id]:value});
}
return (
<main>
<div>
<label>이름</label>
<input type="text" id="name" value={name} onChange={inputChange}></input>
</div>
<div>
<label>이메일</label>
<input type="email" id="email" value={email} onChange={inputChange}></input>
</div>
<div>
<label>전화번호</label>
<input type="tel" id="tel" value={tel} onChange={inputChange}></input>
</div>
<div>
입력값 확인용
<p>{name}</p>
<p>{email}</p>
<p>{tel}</p>
</div>
</main>
)
}
export default App
위 코드의 핵심은 아래와 같다.
1. const [inputs, setInputs] = useState( {name:"", email:"", tel:""} ) 로 useState 인자를 객체 형태로 작성한다.
2. const {name, email, tel} = inputs 한다.
const {name, email, tel} 은 inputs 객체 안의 key 값과 동일한 명으로 작성해야 하고,
const {name, email, tel} 은 state 선언이 아니라 "일반 변수"임을 명시하자!!
그리고 화면에는 일반 변수로 선언한 걸 화면에 보여주는 것이다.
이름, 이메일, 전화번호 input에 onChange가 일어날 때마다
inputChange 에서 inputs 의 세터함수를 이용하여 setInputs({...inputs, [id]:value}) 하는 것이다.
...inputs 로 깊은 복사 후, 복사된 객체에서 특정 id의 value를 변경한 뒤 inputs를 업데이트 한다.
처음에는 아래와 같이 작성했다. destructuring 하는 부분을 생각 못했다.
import React, { useState } from 'react'
import './App.css'
function App() {
const [inputs, setInputs] = useState( {name:"", email:"", tel:""} );
const inputChange = (e) => {
const id = e.target.id;
const value = e.target.value;
setInputs({...inputs, [id]:value});
}
return (
<main>
<div>
<label>이름</label>
<input type="text" id="name" value={inputs.name} onChange={inputChange}></input>
</div>
<div>
<label>이메일</label>
<input type="email" id="email" value={inputs.email} onChange={inputChange}></input>
</div>
<div>
<label>전화번호</label>
<input type="tel" id="tel" value={inputs.tel} onChange={inputChange}></input>
</div>
<div>
입력값 확인용
<p>{inputs.name}</p>
<p>{inputs.email}</p>
<p>{inputs.tel}</p>
</div>
</main>
)
}
export default App
상단에 const {name, email, tel} = inputs; 를 작성하지 않았고,
하위 input 의 value에 맵핑할 때, inputs에 점(.)찍고 key값을 걸어주는 방식으로 작성했다.
