본문 바로가기

공부기록/[강의노트] Udemy React 완벽가이드 1~100

# 58 [udemy React 완벽 가이드 노트] useState의 함수적 갱신(Functional updates)

리액트는 업데이트를 바로바로 하지 않기 때문에

동시에 수많은 상태 업데이트를 계획한다면

오래되었거나 잘못된 상태 스냅샷에

의존할 수 있다.

그래서 가장 최근의 스냅샷을 찍어서 그 다음 상태를 업데이트 하기 위해

 위와같이 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;