State

state : 상태
컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체

정의

import React from 'react';

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

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

export default State;

컴포넌트 선언문(class State extends Component)과
render 함수 사이에 constructor 함수를 선언하고,
constructor 함수 안에는 super()를 호출합니다.
이후 this.state 값에 컴포넌트의 초기 상태값을 설정해줍니다.

사용

위와 같이 state에서 상태값을 설정하는 이유는,
컴포넌트 안의 요소에서 상태값을 반영해서 데이터가 바뀔 때마다
효율적으로 UI에 나타내기 위함입니다.

import React, { Component } from 'react';

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

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
      </div>
    );
  }
}

export default State;

Event & setState

Event를 발생시켜 State값을 변경해주는 경우도 있습니다.

import React, { Component } from 'react';

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

  handleColor = () => {
    this.setState({
      color: 'navy'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State