React: state

2. state

컴포넌트 안에서 사용되는 이벤트에 의해 변경이 일어나는 동적인 값.

값을 변경할 수 있으며 반드시 setState를 사용하여 변경한다. 

 

 

※ state 사용할 때 주의사항

 

❗state에 저장되는 객체는 반드시 초기화(생성자에서 초기화)

❗state 값을 임의로 직접 변경하지 말 것, 반드시 state 값 변경시 setState() 사용.

    직접 변경하면 render 함수가 호출되지 않아 리렌더링 발생 X

 

 

1) 사용법

 

(1) 기본 사용: useState

 

① import useState

import { useState } from 'react';

 

② declare useState()

 

• useState 기본형태

const [state, setState] = useState(initialState);

- state: 현재 상태

- setState: 상태를 변경하는 setState 함수 리턴

- initialState: 상태 초기값. 생략 가능

 

 

 

(2) state 값 변경: setState()

setState() 함수를 호출하여 state 값을 변경하면 자동으로 render 함수를 호출

다음과 같은 예시를 통해 useState와 setState 사용:

• App.js: Increase를 클릭할때마다 1씩 증가

import React, { useState } from 'react';

const App = () => {
    const [num, setNumber] = useState(0);		//초기값 0
    const onIncrease = () => {
    	setNumber(num + 1);
    }
    return(
    	<div>
            <h1>{num}</h1>
            <button onClick={onIncrease}>Increase</button>
        </div>
    );
}

export default App;

 

🌟setState() 함수는 비동기 처리, 즉 작업 순서대로가 아닌 이벤트에 따라 처리.

    어떤 작업에서 시간이 오래 소요되면 해당 작업이 완료될때까지 기다려주지 않고 다음 작업을 실행...

    즉 작업의 실행 순서를 보장하지 않는다.

 

🌟 setState() 함수의 인자로 함수를 전달하면 이전 state 값을 쉽게 가져올 수 있음

 

state를 변경한 후 변경된 state를 사용해야 할 경우(state의 업데이트가 이전의 값에 의존):

 

• Counter.js: Increase, Decrease

import React, { useState } from 'react';

function Counter() {
    const [number, setNumber] = useState(0);
    
    const onIncrease = () => {
    	setNumber(preNumber => preNumber + 1);
    }
    
    const onDecrease = () => {
    	setNumber(preNumber => preNumber - 1);
    }
    
    return(
    	<div>
            <h2>{number}</h2>
            <button onClick={onIncrease}>Increase</button>
            <button onClick={onDecrease}>Decrease</button>
        </div>
    );
}

export default Counter;

 

 

(3) state 값 변경: forceUpdate()

forceUpdate() 함수를 사용하면 화면을 강제로 새로 고침하여 render() 함수 호출

인스턴스 변수와 화면이 변경되어 출력됨.

 

 

• ForceUpdate.js

import React, { Component } from 'react';

class ForceUpdate extends Components {
	constructor(props) {
    	super(props);
        this.state = {
        	stateString: 'react',
        }
    }
    StateChange = () => {
    	this.state.stateString = 'React';
        this.forceUpdate();
    }
    
    render() {
    	return(
            <div>
                <button onClick={this.stateChange}>forceUpdate</button>
                {this.state.stateString}				// react에서 React로 변경
            </div>
        );
    }
}

export default ForceUpdate;

※ forceUpdate()를 사용하는 것은 리액트 성능에 제약이 있으므로

    매번 화면을 새로 출력해야 하는 경우가 아니면 가급적 사용하지 않도록 함