리액트는 업데이트를 바로바로 하지 않기 때문에
동시에 수많은 상태 업데이트를 계획한다면
오래되었거나 잘못된 상태 스냅샷에
의존할 수 있다.
그래서 가장 최근의 스냅샷을 찍어서 그 다음 상태를 업데이트 하기 위해
위와같이 prevState라는 형태의 함수를 넣어주는 것이다.
위 방법은 최신상태의 스냅샷에서 작업하도록 하는
안전한 방법이다.
상태업데이트가 이전상태에 의존하고 있다면 이 함수 폼을 사용하기로 하자.
import React, { useState } from "react";
import "./ExpenseForm.css";
const ExpenseForm = () => {
const [enteredTitle, setEnteredTitle] = useState("");
// });
const titleChangeHandler = e => {
setUserInput((prevState) => {
return {
...prevState,
enteredTitle: e.target.value,
}});
};
return (
<form>
<div className="new-expense__controls">
<div className="new-expense__control">
<label>Title</label>
<input type="text" onChange={titleChangeHandler} />
</div>
</form>
);
};
export default ExpenseForm;
'공부기록 > [강의노트] Udemy React 완벽가이드 1~100' 카테고리의 다른 글
# 61 [udemy React 완벽 가이드 노트] 자식 컴포넌트의 값을 부모에게 전달하기 (0) | 2022.09.10 |
---|---|
# 60 [udemy React 완벽 가이드 노트] 양방향 바인딩 추가(useState를 통한 input태그 입력값 비워주기) (0) | 2022.09.09 |
# 37 [udemy React 완벽 가이드 노트] 컴포지션 (Composition) 컴포넌트 합치기 (0) | 2022.09.08 |
# 18 [udemy React 완벽 가이드 노트] 구조분해할당 (Destructuring 예시) (0) | 2022.09.07 |
# 18 [udemy React 완벽 가이드 노트] 구조분해할당 (Destructuring) (0) | 2022.09.07 |