4.1 같은기능을 하는 state 합치기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

State 합치기

같은 기능을 하는 useState가 3개가 있다.

const ExpenseForm = () => {
  const [enteredTiteld, setEnteredTiteld] = useState("");
  const [enteredAmount, setenteredAmount] = useState("");
  const [enteredDate, setenteredDate] = useState("");

  const titleChangeHandler = (e) => {
    setEnteredTiteld(e.target.value);
  };

  const amountChangeHandler = (e) => {
    setenteredAmount(e.target.value);
  };
  const dateChangeHandler = (e) => {
    setenteredDate(e.target.value);
  };

 

같은 기능을 하는 state는 하나로 묶어주어 관리해보자.

const ExpenseForm = () => {
  const [userInput, setUserInput] = useState({
    enteredTite: "",
    enteredAmount: "",
    enteredDate: "",
  });

  const titleChangeHandler = (e) => {
    setUserInput({
      ...userInput,
      enteredTite: e.target.value,
    });
  };

  const amountChangeHandler = (e) => {
    setUserInput({
      ...userInput,
      enteredAmount: e.target.value,
    });
  };
  const dateChangeHandler = (e) => {
    setUserInput({
      ...userInput,
      enteredDate: e.target.value,
    });
  };

userInput은 객체 형태로 enteredTite, enteredAmount, enteredDate 를 각각 "" 값을 디폴트로 가집니다.

 

다음 코드를 보면 낮선 형태의 코드이다.

  const titleChangeHandler = (e) => {
    setUserInput({
      ...userInput, // 현재 state를 최상단에 위치
      enteredTite: e.target.value, // 업데이트할 코드
    });
  };

titleChangeHandler 함수가 실행되면 setter가 실행되고 현재 state를 스프레드연산자로 userInput의 모든 키와 값을 넣어주어야한다. 대부분 코드에서 현재 state 값이 최상단에 위치해야한다. 그 후 업데이트 할 코드를 작성하면 된다.