[ React ] 컴포넌트 상태 관리 :: State란, 왜 setState()로 state를 변경해야 할까?

State란?

state란 컴포넌트의 변경 가능한 데이터를 관리하는 데 사용되는 자바스크립트 객체.

컴포넌트의 상태를 저장하고 변경할 수 있다.

데이터에 변화가 생기면 리렌더링을 통해 화면에 업데이트 된다.

 

 

클래스 컴포넌트에서 state 사용하기

import React, { Component } from 'react';

// Counter라는 클래스 컴포넌트
class Counter extends Component {
	constructor(props) {   //생성자, 클래스 생성될 때 실행되는 함수
    	super(props);
        this.state = {    //현재 컴포넌트의 state 정의
        	count: 0
        };
    }
    
    //setState()를 호출해 새로운 상태 설정
    addCount = () => {
    	this.setState({ count: this.state.count + 1 });
    };

    render(){
        return(
            <div>
                <div>Count: {this.state.count}</div>
                <button onClick={this.addCount}>Add</button>
            </div>
        );
    }
}

export default Counter;

 

위와 같이 state는 this.setState() 메서드를 통해서만 변경할 수 있다.

 

왜 setState()메서드를 사용해야 하는 걸까?

 

아래처럼 직접 수정할 수도 있지만 리액트는 Virtual DOM을 사용해 컴포넌트의

상태변화를 감지하고 필요한 부분만 업데이트하는 최적화된 렌더링 방식을 쓰기 때문에

state를 직접 수정하여 값을 변경했을 때 리액트가 상태변화를 감지하지 못하고

제대로 렌더링이 되지 않을 수 있다.

 

this.state = {
	count: this.state.count + 1
}

 

그래서 반드시 state를 변경할 때에는 아래와 같이 setState() 메서드를 써야 한다.

이는 해당 상태 변경을 비동기적으로 처리하므로 예상치 못한 오류를 방지할 수 있다.

(해당 상태 변경이 바로 반영되지 않고 다음 렌더링 사이클에서 반영된다.)

 

this.setState({
	count: this.state.count + 1 
});