State를 정의하는 방법을 알아봅시다.

State는 Class Components에서만 사용이 가능합니다. Functional Components에서는 사용이 불가능하죠. 그럼 Class Components에서 어떻게 선언을 하는지 알아봅시다.

import React, { Component } from 'react';

class Counter extends Component {
	constructor(props) {
		super(props);
		this.state = { number: 0 }
	}

	render() {
		return (
			<div>Number</div>
		);
	}
}

export default Counter;

constructor(생성자) 부분을 유심히 봐볼까요? 우선, 이 방법보다 더 간단한 선언 방법이 있기 때문에 다음 글은 참고삼아 읽어주시기 바랍니다. constructor 다음에 super(props)를 작성한 이유는 무엇일까요? 먼저, Counter 클래스는 Component 클래스를 상속받았습니다. 그럼 해당 클래스에서는 그 클래스에서의 멤버 뿐만이 아닌 부모 클래스의 모든 멤버까지 포함하게 됩니다. 따라서 부모 클래스의 멤버를 초기화시켜주기 위해 자식 클래스의 생성자에서 부모 클래스의 생성자를 호출해야만 합니다. 이때 사용하는 함수가 super 함수입니다.

하지만 Class Fields 문법을 사용하면 위의 선언 방식보다 더 간단하게 선언할 수 있습니다.

• Class Fields

저희는 앞으로 Class Fields 문법을 활용한 State 선언 방식만 사용할 것입니다.