☠️ 함수형 컴포넌트 vs class 컴포넌트 상태관리 주의

아주 기본적이면서도 때때로 이런 기본적인 것들을 망각할 때가 많다.
반성하면서 포스팅을 한다.

[함수형 컴포넌트 (hook: useState)]

import React, { useState } from 'react'

const [emailPw, setEmailPw] = useState({email: "", password: ""})
    const hadleInputValue = (key) => (text) => {
        setEmailPw({
            ...emailPw, // !!!
            [key]: text.target.value,
        });
    };
  ...생략...
  <div>
    <input
        type="email"
        onChange={hadleInputValue("email")}
    ></input>
  </div>
  <div>
    <input
        type="password"
        onChange={hadleInputValue("password")}
    ></input>
  </div>



[class형 컴포넌트 (setState)]
  ...생략...
  this.state = {
      email: "",
      password: ""
  }
  ...생략...

  hadleInputValue = (key) => (text) => {
      this.setState({
          [key]: text.target.value,
       });
  };
...생략...
  <div>
    <input
        type="email"
        onChange={hadleInputValue("email")}
    ></input>
  </div>
  <div>
    <input
        type="password"
        onChange={hadleInputValue("password")}
    ></input>
  </div>

클래스형 컴포넌트에서는 setState를 하면 기존 값에 이어 state객체 안에 보존되지만,
함수형 컴포넌트에서는 이전 상탯값 상태값을 지워버린다.
기존 코드를 타입스크립트로 리팩토링하면서 이러한 함정에 많이 헤맸다.(예시 코드는 타입스크립트 X)
이러한 차이점을 염두하여 함수형 컴포넌트의 기존 상태값이 지워지지 않도록
...state와 같이 Spread 연산자를 이용하여 불변성을 유지하자.