1. State

- 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.

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

1.1 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는 객체이며, 객체 안의 key 이름은 원하는대로 설정할 수 있다.

1.2 State 사용

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