form 태그 만들기
const [user, updateUser] = useState ({
username:"",
password:""
})return (
<div>
<form>
<input type='text' placeholder='username' onChange={changeValue} name="username" />
<input type='password' placeholder='password' onChange={changeValue} name="password"/>
<button type='submit'>로그인</button>
</form>
<button onClick={loginProcess}>로그인</button>
<button onClick={move}>로그인 안하고 넘어가기</button>
</div>
); function changeValue(e){
console.log(e);
}onChange 가 실행될 때 이벤트 객체를 전달받는다.
폼태그에 값이 입력됐을 때 발생하는 이벤트를 콘솔로 확인해본다.
입력한 값은 e.target.value 에 확인한다.
form 태그 데이터 받기
function changeValue(e){
console.log("e.target.value",e.target.value);
console.log("e.target.name",e.target.name);
updateUser({
username : e.target.value,
password : e.target.value
});
console.log("username",user.username);
console.log("password",user.password);
}
Computed Property Name 활용해서 타겟과 값 각자 받기
Computed Property Name은 객체의 프로퍼티 키를 문자열로 변환할 수 있는 표현식을 사용해(변수, 함수 등) 동적으로 지정하는 문법이다. 이를 통해 객체 리터럴 내부에서 Computed Property Name으로 프로퍼티 키를 동적으로 생성할 수 있다.
프로퍼티 키로 사용할 표현식을 대괄호”[]”로 묶어야 한다.
function changeValue(e){
console.log(e);
console.log("e.target.value",e.target.value);
console.log("e.target.name",e.target.name);
//Computed Property Name
setUser({
[e.target.name]:e.target.value,
});
console.log("username",user.username);
console.log("password",user.password);
}
전개연산자를 사용해서 타겟과 값 각자 받기
직전 코드를 사용할경우 user객체의 주소(참조)를 유지 하지 않고
새로운 객체를 만들어서 React에게 넘겨준다. 그래서 이전 객체는 완전히 덮어써진다.
이유는 React는 주소를 비교해서 바뀌면 리랜더링 하는구조인데 기존 주소에서 새로운 주소로 바뀌면서, 기존 정보가 복사되지 않아 사라진 것"이 더 정확한 표현이야. 새로운 객체로 덮는거였기 때문에 이전 코드는 옳지 않다.
function changeValue(e){
console.log(e);
console.log("e.target.value",e.target.value);
console.log("e.target.name",e.target.name);
updateUser(user => ({
...user,
[e.target.name]: e.target.value
}));
console.log("username",user.username);
console.log("password",user.password);
}
Share article