React 정복기(7) - state

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값. 자식 컴포넌트는 해당 props를 읽기 전용으로만 사용할 수 있으며, porps를 바꾸려면 부모 컴포넌트에서 바꿔 줘야 함

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미 함
함수형 컴포넌트에서는 state를 사용하며,
클래스형 컴포넌트에서는 useState라는 함수를 통해 state를 사용

state를 사용한 컴포넌트(클래스형)

Puppy.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    constructor(props) {
        super(props);

        this.state = {
            count: 0
        };
    }

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
            </div>
        );
    }
}

export default Puppy;

• 컴포넌트에 state를 설정할 때는 constructor(생성자) 메서드를 사용
  - constructor를 작성할 때는 반드시 super(props)를 호출해야 함
  - 생성자 안에서 this.state 초기값을 설정
  - this.state는 객체 형식이어야 함
• this.setState를 사용하여 state값을 바꿀 수 있음. 여기서는 count 값을 변경
  

state를 constructor에서 꺼낸 컴포넌트(클래스형)

Puppy.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    state = {
        count: 0
    };

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
            </div>
        );
    }
}

export default Puppy;

훨씬 코드가 간결해 졌음을 확인할 수 있다!!

this.setState에 객체 대신 함수를 전달해야 하는 이유

바로 위 소스에서는 this.setState에 객체를 전달 했으나 잘 동작했다. 하지만 아래 소스처럼 this.setState에 객체를 전달하여 두번 호출하면 +2가 되지 않고 +1만 수행된다. 이는 state 값을 업데이트할때 상태가 비동기적으로 업데이트되기 때문이다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    state = {
        count: 0
    };

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
                <button onClick={() => {
                    this.setState({count: count + 1})
                    this.setState({count: count + 1})
                }}>
                    입양 +2
                </button>
            </div>
        );
    }
}

export default Puppy;

setState 인자에 객체 대신 함수를 넘겨 구현한 Puppy 컴포넌트

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Puppy extends Component {

    state = {
        count: 0
    };

    static defaultProps = {
        name: 'default puppy name'
    };

    static propTypes = {
        name: PropTypes.string,
        age: PropTypes.number.isRequired
    };

    render() {
        const {name, age} = this.props;
        const {count} = this.state;
        return (
            <div>
                <div>내 강아지 이름은 {name} 입니다.</div>
                <div>내 강아지 나이는 {age} 입니다.</div>
                <div>{count} 마리가 있습니다.</div>
                <button onClick={() => {
                    this.setState({count: count + 1})
                }}>
                    입양 +1
                </button>
                <button onClick={() => {
                    this.setState(prevState => {
                        return {
                            count: prevState.count + 1
                        };
                    });
                    this.setState(prevState => ({
                        count: prevState.count + 1
                    }));
                }}>
                    입양 +2
                </button>
            </div>
        );
    }
}

export default Puppy;

"입양 +2" 버튼의 두 setState의 동작은 동일함. prevState는 기존 상태를 나타냄

함수형 컴포넌트는 "리액트를 다루는 기술" 8장에서 이어져 추후 설명 하도록 한다