[React.js] state와 클래스형 컴포넌트의 관계

state란?

동적 데이터를 다루는 객체이며 클래스형 컴포넌트에서 사용할 수 있는 개념이다.

직접적으로 state를 변환 할수 없고, 간접적인 방법인 state를 받아서, this.setState()를 통해 간접적으로 데이터를 변경할 수 있다.

setState()함수는 바뀐 데이터 값만 변환해준다. 바뀌지 않은 데이터에 대해선 그대로 둔다. 여기서 React.js의 장점이 발휘되는 것인데, React.js는 데이터 변경이 생기면 해당 데이터만 변경해주고 그렇지 않은 것에 대해선 그대로 두기 때문에 속도가 빠른 장점이 있다!

즉, React.js는 필요한 부분만 바뀌니까, 화면 구성이 빠르다.

 

state는 반드시 클래스형 컴포넌트 안에서 추가되어야 한다.

 

이 객체 형태의 데이터(state)를 사용하기 위해선, 컴포넌트가 함수형이 아닌 클래스형이여야한다. 

클래스형 컴포넌트는 아래와 같이 생겼다.

import React from 'react';

class App extends React.Component {
	state = {
    	count: 0,
    }
    add = () => {
    	this.setState(current => {
        	count: current.count + 1
        });
    }
    minus = () => {
    	this.setState(current => {
        	count: current.count - 1
        });
    }
	render() {
    	return(
        	<div>
        		<Button onClick={this.add}>Add</Button>
            	<Button onClick={this.minus}>Minus</Button>
            </div>
        );
    }
}

export default App;

클래스형 컴포넌트는 리액트의 컴포넌트를 상속받는다. 

리액트 컴포넌트를 상속 받지 않고 React.Component 클래스 기능을 App클래스에서 사용하려면 App클래스에 500줄이 넘는 코드로 여러 기능이 포함되어있는 React.Component의 기능들을 일일이 따라 입력해야한다. 편의성을 위해 리액트 컴포넌트를 상속(extends)받는 것이다.