[React] 07. State & Event

🎈 State 란?

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

🎈 State 객체

클래스형 컴포넌트에서 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;

❗ 클래스형 컴포넌트 안에는 필수적으로 render 함수가 필요하고, 그 화면에 나타내고 싶은 JSX 요소는 return문 안에 들어있다.

state 를 설정할 때는 constructor 함수를 작성하여 설정한다.
이 때, constructor 함수는 컴포넌트 선언문과 render 함수 사이에 작성하여야 하며, constructor 함수 안에는 super()를 호출해야한다.

그 다음에는 this.state 값에 컴포넌트 초기 상태값을 설정해준다.

State 객체만 따로보기

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

state도 객체이니만큼 key 와 value 모두 필요하다.

State 사용 예시

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

import React, { Component } from 'react';

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

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

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

export default State;

1. <button> 을 누르면 onClick 이벤트가 발생하면서, handleColor 함수가 발생된다.
2. handleColor 함수가 실행되면서 setState 함수가 실행되고, state 의 color 값을 blue 로 바꿔준다.
3. render 함수를 호출하며 랜더링해주며, 바뀐 state 값이 반영되어 <h1> 의 색상이 변경된다.