class , functional Component setState는 살짝 다르다

class Component의 경우

import { Component } from 'react';

class Counter extends Component {
  state = {
    number1: 5,
    number2: 10,
  };

  render() {
    const { number1, number2 } = this.state;
    return (
      <div>
        <h1>{number1}</h1>
        <h1>{number2}</h1>
        <button
          className="removeButton"
          onClick={() => {
            this.setState({ number2: number2 - 1 }); // 1
          }}
        >
          1씩 감소하는 버튼
        </button>
      </div>
    );
  }
}

export default Counter;

class형 Component의 this.setState 함수는 인자로 전달된 객체 안에 들어 있는 값만 바꾼다.

즉 state 객체에서 바꾸고 싶은 key-value만 setState의 인자로 넘겨준다.

functional Component의 경우

import React, { useState } from 'react';

const Counter = () => {
  const [nums, setNums] = useState({
    number1: 5,
    number2: 10,
  });
  const { number1, number2 } = nums;
  return (
    <div>
      <h1>{number1}</h1>
      <h1>{number2}</h1>
      <button
        className="removeButton"
        onClick={() => {
          setNums({ number2: number2 - 1 }); 
        }}
      >
        1씩 감소하는 버튼
      </button>
    </div>
  );
};

export default Counter;

버튼 클릭 후

functional Component의 setState는 해당 state를 덮어쓰게 된다.

따라서 다음과 같이 spread operator를 사용해서 set을 하자

onClick={() => {
  setNums({ ...nums, number2: number2 - 1 }); 
}}