2-4. this.setState에 객체 대신 함수 인자 전달하기

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

만약 onClick에 설정한 함수 내에서 this.setState를 두번 호출하면 어떻게 될까?

...
render() {
const { number, fixedNumber } = this.state;
return (

        <div>
            <h1>{number}</h1>
            <h2>바뀌지 않는 값 : {fixedNumber}</h2>
            <button onClick={
                () => {
                    this.setState({number: number +1});
                    this.setState({number: this.state.number +1});
                }

            }>
	                +1버튼
            </button>
        </div>
    );
}

...

여전히 정상적으로 +1 되는 것을 볼 수 있습니다.
⇒ 함수를 두번 호출 하더라도 state값이 즉시 바뀌는것이 아니기 때문입니다.

이에 대한 해결 방안으로
this.setState를 사용할 때 객체 대신 함수를 인자로 넣어주는 것이 있습니다.

import React, { Component } from 'react';

class Counter extends Component {

    state = {
        number: 0,
        fixedNumber: 0
        // state를 조회할 때는 this.state로 조회합니다.
    };

    render() {
        const { number, fixedNumber } = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <h2>바뀌지 않는 값 : {fixedNumber}</h2>
                <button onClick={
                    () => {
                        // this.setState({number: number +1});
                        this.setState((prevState,props) => {
                            return {
                                number: prevState.number +1
                            };
                        })
                        // 위 코드와 아래 코드는 완전히 똑같은 기능을 합니다.
                        // 아래 코드는 함수에서 바로 객체를 반환한다는 의미입니다.
                        this.setState(prevState => ({
                            number:prevState.number + 1
                        }));
                    }

                }>
                    +1버튼
                </button>
            </div>
        );
    }
}

export default Counter;

prevState는 기존 상태이며, props는 현재 지니고있는 props를 가리킵니다.

업데이트 과정에서 props가 필요하지 않다면 생략이 가능합니다.

이렇게 하면 함수가 두 번씩 작동되어 +2 되는것을 확인할 수 있습니다