[React] 클래스형 컴포넌트에서 state 사용하기

state

• 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
• 클래스형 컴포넌트에서 사용 : state
• 함수형 컴포넌트에서 사용 : useState

클래스 형 컴포넌트에서 state 기본 사용법

//Counter.js
import React, {Component} from 'react'

class Counter extends Component {
    //컴포넌트에서 state를 설정할 때는 다음과 같이
    //constructor 메서드를 작성하여 설정한다. 
    //constructor는 클래스형 컴포넌트의 생성자 메서드인데,
    //이 때 반드시 super(props)를 호출해 주어야 한다. 
    constructor(props) {
        //현재 클래스형 컴포넌트가 상속받고 있는 
        //리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준다.
        super(props);
        //state의 초깃값 설정하기 
        this.state = {
            increaseNum : 0,
            decreaseNum : 100
        };
    }

    render(){
        //state를 조회할 때는 this.state로 조회한다. 
        const {increaseNum, decreaseNum} = this.state;
        return(
            <div>
                <h1>증가하는 값 : {increaseNum}</h1>
                <h2>감소하는 값 : {decreaseNum}</h2>
                <button
                    onClick={()=>{
                        //this.setState를 사용하여
                        //state에 새로운 값을 넣을 수 있다. 
                        this.setState({
                            increaseNum : increaseNum + 1,
                            decreaseNum : decreaseNum - 1
                        });
                    }}
                >
                    Increase / Decrease
                </button>
            </div>
        );
    }
}

export default Counter;

//App.js
// import logo from './logo.svg';
import './App.css';
import React  from 'react';
import Counter from './Counter';

const App = () => {
  return <Counter />;
}
export default App;

constructor를 사용하지 않고 state 선언하기

import React, {Component} from 'react'

class Counter extends Component {
  	//constructor 선업없이 이렇게 선언할 수 있다. 
	state = {
		increaseNum : 0,
		decreaseNum : 100
	}
	render(){
  		...
}

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

import React, {Component} from 'react'

class Counter extends Component {
    state = {
        increaseNum : 0,
        decreaseNum : 100
    }
    render(){
        //state를 조회할 때는 this.state로 조회한다. 
        const {increaseNum, decreaseNum} = this.state;
        return(
            <div>
                <h1>증가하는 값 : {increaseNum}</h1>
                <h2>감소하는 값 : {decreaseNum}</h2>
                <button
                    onClick={()=>{
                        //preState는 기존 상태
                        //props는 현재 지니고 있는 props를 가리킨다. 
                        //만약 업데이트하는 과정에서 props가 필요하지 않다면
                        //생략이 가능하다.
                        this.setState((preState, props) => {
                            return {
                                increaseNum : preState.increaseNum + 1,
                                decreaseNum : preState.decreaseNum - 1
                            };
                        });
                        //화살표함수에서 바로 값을 반환하는 법
                        this.setState(preState => (
                            { increaseNum : preState.increaseNum + 1}
                        ));
                    }}
                >
                    Increase / Decrease
                </button>
            </div>
        );
    }
}

export default Counter;

setState 함수가 호출되고 난 후 동작을 정의하기

import React, {Component} from 'react'

class Counter extends Component {
    state = {
        increaseNum : 0,
        decreaseNum : 100,
        resultText : "NULL"
    }
    render(){
        const {increaseNum, decreaseNum} = this.state;
        return(
            <div>
                <h1>증가하는 값 : {increaseNum}</h1>
                <h2>감소하는 값 : {decreaseNum}</h2>
                <button
                    onClick={()=>{
                        this.setState(preState => (
                            {
                                increaseNum : preState.increaseNum + 1,
                                decreaseNum : preState.decreaseNum - 1
                            }),
                            //여기서 Callback 함수를 정의한다. 
                            () =>{
                                console.log('방금 setState가 호출되었습니다.');
                            }
                        );
                    }}
                >
                    Increase / Decrease
                </button>
            </div>
        );
    }
}

export default Counter;

참고 : 리액트를 다루는 기술