React - 상태변수 state / setState()

상태변수 state

: 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값

  상태 변수의 값이 변경되면 리렌더링이 발생

   클래스형 컴포넌트는 setState() 메소드를 이용, 함수형 컴포넌트는 useState() 훅 함수가 반환하는 함수를 이용해서 값을 변경해야 함

 

1. 클래스형 컴포넌트

App.js

import Counter from './Counter';

function App(){
	return(
    	<>
        	<Counter />        
        </>
    );
}

export default App;

1) 클래스형 컴포넌트에서 state 사용

import { Component } from 'react';

class Counter extends Component{
	constructor(props){
            super(props);
            this.state = {
                number : 0       
            }
	};
	render(){
            return(
                <>
                        <h1> {this.state.number} </h1>
                        <button onClick={ () => {this.setState({number : this.state.number +1});
                        console.log(this.state.number);
                        }}> +1 </button>
                </>
            );
    };
};

export default Counter;

화면 : 버튼 클릭할 때마다 숫자가 증가함

console : 업데이트 이전의 값이 출력됨

 

2) 상태변수 setState() 를 사용하지않고, 변경하는 형태로 코드를 수정

  <button onClick={ () => {
                    console.log(this.state.number);
                    // this.setState({number : this.state.number +1});
                    this.state.number = this.state.number +1;
                    console.log(this.state.number);
                }}> +1 </button>

 

화면 : 버튼 클릭할 때마다 숫자가 증가하지않음

console : 업데이트 이전의 값과 클릭후 증가된 값이 변경됨을 확인

 

3) number 변수를 상태변수가 아닌 일반변수로 변경

import { Component } from 'react';

class Counter extends Component{

    number = 0;
	render(){
    	return(
        	<>
            	<h1> {this.number} </h1>

                <button onClick={ () => {
                    console.log(this.number);
                    this.number = this.number +1;
                    console.log(this.number);
                }}> +1 </button>
            </>
        );
    };
};

export default Counter;

화면 : 버튼 클릭할 때마다 숫자가 증가하지않음

console : 업데이트 이전의 값과 클릭후 증가된 값이 변경됨을 확인

 

=> 상태변수를 사용하는 이유

: 변수의 값 변화가 화면에 반영되어야 하는 경우 상태변수를 사용하고,

  이때 상태변수의 값 변경을 위해서는 setState() 를 이용해야함

 

4) 상태변수를 지역변수로 재정의해서 사용

import { Component } from "react";

class Counter extends Component {

    constructor(props) {
    	super(props);
        this.state = {
            number: 0   // 상태변수이름 : 상태변수초기값
        };
    }

    render() {
        // 상태 변수가 하나 또는 개수가 적다면 아래와 같이 직접 선언
        // const number = this.state.number;
        
        // 일반적으로 객체 비구조화를 이용해서 상태변수의 값을 분해해서 지역변수로 할당
        const { number } = this.state;
        
        return (
            <>
                {/* 상태변수의 값을 출력 */}
                <h1>{number}</h1>

                {/* 버튼을 하나 추가해서 해당 버튼을 클릭할 때 마다 상태변수의 값을 하나씩 증가 */}
                <button onClick={() => {
                    console.log("Before:", number);
                    this.setState({ number: number + 1 });
                    console.log("After:", number);
                }}>하나 증가</button>
            </>
        );
    }
}
export default Counter;

setState()

: 컴포넌트 state의 변경사항을 대기열에 집어넣고, React에 해당 컴포넌트와 자식들이 갱신된 state를 사용하여 다시 렌더링 되어야한다고 알려줌

  컴포넌트를 갱신하는 데에 있어 즉각적인 명령이 아닌 요청임.

1. 클래스형 컴포넌트

  1) updater 함수 이용 => setState(updater[,callback]) 

<button onClick={ () => {
    console.log(number);
    // this.setState({ number: number + 1 }); 
    this.setState(currentState => ({number : currentState.number+1})); //update 함수 이용
    console.log(number);
}}> +1 </button>

화면 : 버튼 클릭할 때마다 숫자가 증가함

console : 업데이트 이전의 값이 출력됨

 

2) 변경객체를 전달하는 방법 => setState(stateChange[,callback]) 

<button onClick={ () => {
    console.log(number);
    // this.setState({ number: number + 1 }); 
    this.setState(currentState => ({number : currentState.number+1}),
    				()=> console.log(this.state.number)    				
                    ); //update 함수 이용
}}> +1 </button>

 

화면	console
+1 증가	before= after	this.setState({num : num +1}); this.setState({num : num +1}); this.setState({num : num +1});
+3 증가	before = after	this.setState(curNum => ({num: curNum.num+1})); this.setState(curNum => ({num: curNum.num+1})); this.setState(curNum => ({num: curNum.num+1}));
+3 증가	before ≠ after(+3)	this.setState(curNum => ({num: curNum.num+1}),                       ()=> console.log(this.state.num)                     );

2. 함수형 컴포넌트

import { useState } from 'react';

function Counter(){

    const {number, setCount} = useState('');
    return(
        <>
            <h1> {number} </h1>

            <button onClick={
                ()=>setCount(number+1)
            }> +1 </button>
        </>
    );

};
export default Counter;

 

클래스 Component	함수형 Component
this.setState(curState => ({num : curState.num +1}));	const {num , setNum} = useState(''); () => setNum(num + 1)