state 2.constructor() 없이 state 사용하기

state의 초기값 을 지정해 주기 위해 constructor메서드를 선언해 주었다.

하지만,!

constructor()메서드 없이 state 지정

할 수 있다.

• Counter.js

import React, { Component } from 'react';

class Counter extends Component {
 state = {
   number: 0,
   fixedNumber: 0
  };
  
  render() {
  const{ number, fixedNumber } = this.state;
  return (
     <div>
        <h1> {number} </h1>
        <h2> 변화하지 않는 값 : {fixedNumber} </h2>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
   }
  }
  
  export default Counter;

이렇게, constructor 메서드를 선언하지 않고도 state 초기값을 설정할 수있다.

this.setState 객체 대신 함수 인자 전달하기

this.setState를 사용하여 state값을 업데이트할 때는 상태가 비동기적을 업데이트된다.

무슨말인지 코드로 알아보자!!

• counter.js - button onClick

onClick={() => {
 this.setState({ number: number + 1 });
 this.setState({ number: this.state.number + 1 });
 }}

onClick 함수에 this.setState를 두 번 사용함에도 불구하고 버튼을 클릭하였을 때는, 1만큼만 더해진다.
왜냐하면, this.setState 사용한다고 해서 state값이 바로 변화하지는 않는다.

해결책

this.setState를 사용할 때 객체 대신에 함수를 인자 로 넣어주는 것이다.

<button 
  onClick={() => { 
    this.setState(prevState) => {
       return {
          number: prevState.number + 1
          };
         });
         
     this.setState(prevState => ({
          number: prevState.number + 1
         }));
       }}
       >
       +1
</button>

//onClick 을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다. const sum = (a,b) => (a + b); 의 원리로
onClick 에서 두번째로 this.state 함수를 사용할 때는 화살표 함수에서 바로 객체를 반환하도록 했기 때문에 

prevState => ({})  와 같은 형태로 코드가 이루어진다.
          

브라우저에서 버튼을 누르면 2 4 6 8 ... +2 가 되는 걸 볼 수가 있다.