본 내용은 아래 강의에 대한 복습내용입니다.
https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의
현재 평점 4.9점 수강생 13,088명인 강의를 만나보세요. 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량
www.inflearn.com
아래 코드는 State로 사용자 회원가입 값을 관리하는 것을 보여주는 코드다.
onChange~는 이벤트핸들러 함수로 e.target.value는 이벤트가 발생한 태그의 value값이 들어오게 된다.
import { useState } from "react";
// 간단한 회원가입 폼
// 1. 이름
// 2.생년월일
// 3.국적
// 4.자기소개
const Register = () => {
const[name,setName] = useState("이름");
const[birth,setBirth] = useState("");
const[nation,setNation] = useState("");
const[bio,setBio] = useState("");
const onChangeName = (e) =>{
setName(e.targe.value);
};
const onChangeBirth =(e) =>{
setBirth(e.target.value);
};
const onChangeNation = (e) =>{
setNation(e.target.value);
};
const onChangeBio = (e) =>{
setBio(e.target.value);
};
return <div>
<div>
<input
value={name}
onChange={onChangeName}
placeholder={ "이름"}
/>
</div>
<div>
<input
value={birth}
onChange={onChangeBirth}
type="date" />
{birth}
</div>
<div>
<select
value={nation}
onChange={onChangeNation}>
<option></option>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
{nation}
</div>
<div>
<textarea
value={bio}
onChange={onChangeBio}
/>
{bio}
</div>
</div>
};
export default Register;
그런데 이 코드를 보면 사용자의 이름,생년월일,국적,자기소개를 하나하나씩 상태값으로 받는데,
이 네 개의 값을 각각 useState로 관리하지 말고, 한 번에 객체로 묶어서 관리할 수 있다.
useState의 기본값에 이름,생년월일,국적,자기소개를 가진 객체를 세팅시키는 것이다.
그리고 각각의 이벤트 핸들러 함수에서 값을 변경시에 (...)스프레드 연산자로 기존 객체에 있는 값을 유지하면서 특정 값만 업데이트 시킨다.
import { useState } from "react";
// 간단한 회원가입 폼
// 1. 이름
// 2.생년월일
// 3.국적
// 4.자기소개
const Register = () => {
const[input,setInput] = useState({
name: "",
birth : "",
nation:"",
bio:"",
});
console.log(input)
const onChangeName = (e) =>{
setInput({
...input,
name : e.target.value,
});
};
const onChangeBirth =(e) =>{
setInput({
...input,
birth : e.target.value,
});
};
const onChangeNation = (e) =>{
setInput({
...input,
nation : e.target.value,
});
};
const onChangeBio = (e) =>{
setInput({
...input,
bio:e.target.value,
});
};
return <div>
<div>
<input
value={input.name}
onChange={onChangeName}
placeholder={ "이름"}
/>
</div>
<div>
<input
value={input.birth}
onChange={onChangeBirth}
type="date" />
</div>
<div>
<select
value={input.nation}
onChange={onChangeNation}>
<option></option>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
</div>
<div>
<textarea
value={input.bio}
onChange={onChangeBio}
/>
</div>
</div>
};
export default Register;
그런데 다시 이 각각의 이벤트 핸들러함수를 하나의 통합 이벤트 핸들러함수로 처리할 수 있다.
아래보면 onChange 라는 통합 이벤트 핸들러함수를 보면
[e.target.name] : e.target.value 이 부분이 있다.
객체를 만들 때 변수를 쓰고 대괄호로 감싸면 프로퍼티의 key로 설정되는 문법이다.
따라서 e.target.name의 key 값으로 e.target.value이 세팅되는 것이다
그리고 이 e.targe.name에는 이벤트가 발생한 태그의 name속성이 설정된 값이 들어간다.
그래서 이전 코드와는 달리 각각의 input,select,textarea 태그를 보면 name옵션을 추가된 것이다.
import { useState } from "react";
// 간단한 회원가입 폼
// 1. 이름
// 2.생년월일
// 3.국적
// 4.자기소개
const Register = () => {
const[input,setInput] = useState({
name: "",
birth : "",
nation:"",
bio:"",
});
console.log(input)
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"
value={input.birth}
onChange={onChange}
type="date" />
</div>
<div>
<select
name="nation"
value={input.nation}
onChange={onChange}>
<option></option>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
</div>
<div>
<textarea
name="bio"
value={input.bio}
onChange={onChange}
/>
</div>
</div>
};
export default Register;