[React] 📖 State로 사용자 입력 관리하기 - 심화

❗️ 이전포스팅에 있는 상태관리를 보다 효율적으로 관리하는 방법 알아보기!

📍 분리된 state 값을 하나의 객체로 만들기

// Register.jsx

const [name, setName] = useState("이름");
const [birth, setBirth] = useState("");
const [country, setCountry] = useState("");
const [bio, setBio] = useState("");

이렇게 작성한 State를 한번에 관리하기 위해서 지우고

// Register.jsx

const [input, setInput] = useState({
	name:"",	➡️ name property
	birth:"",	➡️ birth property
	country:"",	➡️ country property
	bio:""		➡️ bio property
})

useState 안에 지웠던 State를 객체 형태로 만들어서 관리하도록 한다.
그리고 onChange로 설정했던 것들을 다 변경해야하는데

const onChangeName = (e) => {
        setName(e.target.value);
    }

    const onChangeBirth = (e) => {
        setBirth(e.target.value);
    }

    const onChangeCountry = (e) => {
        setCountry(e.target.value);
    }

    const onChangeBio= (e) => {
        setBio(e.target.value);
    }

setName, setBirth, setCountry, setBio 라는 함수는 더이상 존재하지않으니 지워주고

const onChangeName = (e) => {
	setInput({
		...input,
		name : e.target.value
	})
}

const onChangeBirth = (e) => {
	setInput({
		...input,
		birth : e.target.value
	})
}

const onChangeCountry = (e) => {
	setInput({
		...input,
		country : e.target.value
	})
}

const onChangeBio= (e) => {
	setInput({
		...input,
		bio : e.target.value
	})
}

• ...input : spread 연산자를 이용해서 기존의 이 input state에 들어있는 property 값들을(name을 제외한 property값들) 유지되게 해준다.
  ➡️ 현재 함수는 이름을 변경할 경우 이름 값만 변경할 수 있도록 하는 것이므로 생일, 국적, 자기소개 값들은 변경되면 안되기 때문이다.
  ➡️ ...input를 작성하지 않으면 name에 대한 값만 바뀌고 생일, 국적, 자기소개 값이 사라진다.

📍 input 태그들의 value 속성 바꾸기

더이상 name, birth, countr, bio 값이 존재하지 않으므로 value 안의 값을 input.을 붙여서 바꿔준다.

return (
	<div>
		{/* 이름 */}
		<div>
			<input value={input.name} ❗️
				onChange={onChangeName} 
                placeholder={"이름"}/>
		</div>
            
		{/* 생년월일 */}
		<div>
			<input type="date" value={input.birth} onChange={onChangeBirth}/> ❗️
		</div>

		{/* 국적 */}
		<div>
			<select value={input.country} onChange={onChangeCountry}>❗️
              <option>-</option>
              <option>한국</option>
              <option>미국</option>
              <option>영국</option>
          </select>
      </div>

      {/* 자기소개 */}
      <div>
          <textarea value={input.bio} onChange={onChangeBio}/>❗️
      </div>
	</div>
)

---

📍 Reguster 컴포넌트가 리렌더링될 때마다 값 변경 확인

• 처음에는 기본값이 출력된다.
  {name: '', birth: '', country: '', bio: ''}
• ...input 때문에 내가 입력한 property 값만 변경되고 나머지 property 값은 변경되지않고 유지된다.

---

📍 분리된 이벤트 핸들러 하나로 뭉치기

const onChange = (e) =>{
	setInput({
		...input,
		[e.target.name] : e.target.value,
	})
}

이게 먼 소리야 하고 강의를 계속 따라했더니

return (
	<div>
		{/* 이름 */}
		<div>
			<input 
			name="name"	❗️
			value={input.name} 
			onChange={onChange} 
			placeholder={"이름"}/>
		</div>
            
		{/* 생년월일 */}
		<div>
			<input 
			name="birth" ❗️
			type="date" 
			value={input.birth} 
			onChange={onChange}/> 
		</div>
		
		{/* 국적 */}
		<div>
			<select 
			name="country" ❗️
			value={input.country} 
			onChange={onChange}>
				<option>-</option>
				<option>한국</option>
				<option>미국</option>
				<option>영국</option>
			</select>
		</div>

		{/* 자기소개 */}
		<div>
			<textarea 
			name="bio" ❗️
			value={input.bio} 
			onChange={onChange}/>
		</div>
	</div>
)

input 태그에 name 속성을 추가하니 코드를 이해했다.
[e.target.name] : e.target.value
선택한 input 태그의 name 속성 값이 변경되면 변경된 값으로 바꿔주는거였다.
약간 birth : e.target.value 이거랑 같은 의미인데 이게 input 태그의 name 속성으로 변경된거잖아.

• [e.target.name] 여기 안에는 이벤트가 발생한 태그의 name 속성에 설정된 값이 들어가있다.
  

---