State

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다.
• state는 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체입니다.
• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있습니다.

Class component state

import React from 'react';

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Class Component State</h1>
      </div>
    );
  }
}

export default State;

• 클래스형 컴포넌트에서는 state를 설정할 때는 화면에 보이듯이 constructor 함수를 작성하여 설정합니다.
• constructor 함수는 컴포넌트 선언문(class State extends Component)과 render 함수 사이에 작성합니다.
• 그리고 constructor 메소드 안에는 super()를 호출합니다.
• 그 다음에는 this.state 값에 컴포넌트의 초기 상태값을 설정해줍니다.

state 객체

  this.state = {
      color: 'red'
  };

• state는 객체로 key, value 형태로 지정합니다.

state 사용법

state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함(리액트는 view 라이브러리)

<h1 style={{ color: this.state.color  }}>Class Component State</h1>

// this : 해당 컴포넌트
// this.state : 해당 컴포넌트의 state 객체
// this.state.color : state 객체의 특정 key(color)값. 즉 "red"

위와 같이 this.state 를 통해 선언한 state값을 가져올 수 있습니다.

setState

this.setState({
  color : 'blue'
})

state 객체의 값들은 setState를 통해 값을 변경할 수 있습니다.
this.state를 통해 바로 값을 변경할 경우 render 함수를 실행하지 않아 화면의 변경사항을 적용할 수 없습니다.