React - State

1. 클래스형 컴포넌트

리액트에서 컴포넌트를 생성하는 방법에는 두가지가 있는데, 하나는 함수형 컴포넌트이고 다른 하나는 클래스형 컴포넌트이다.

클래스형 컴포넌트는 다음과 같이 생성한다.

import React, {Component} from 'react';

<!--리액트가 제공하는 component 클래스를 App 클래스가 상속받음-->
class App extends Component {
  render() {
    return(
    <div>
    </div>
  );  
  }
}

클래스형 컴포넌트는 그 자체로는 함수가 아니기 때문에 return문을 사용할 수 없다. 따라서 render() 함수를 사용하여 JSX를 반환한다.

2. State 란?

"The state object is where you store property values that belongs to the component.
When the state object changes, the component re-renders."

State는 동적 데이터-변경될 가능성이 있는 데이터-를 말한다. State는 함수형이 아닌 클래스형 컴포넌트에서 사용할 수 있는 개념이다. 외부 사용자가 알 필요가 없는 정보를 숨길 때 사용한다.

State는 다음과 같은 방법으로 만든다.

class App extends Component {
  constructor(props){
    super(props);
    this.state = {}
  }
  render() {
  return (
    <div className="App">
	</div>
  );
  }
}

컴포넌트가 실행될 때 constructor이라는 함수가 있다면 제일 먼저 실행되어 컴포넌트를 초기화한다.