[React] State & Event

✅ 1. State

• '상태'라는 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
• state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체이다.
• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.
• State 정의 방법에는 Class형과 Function형 2가지가 있다. (자세한 syntax는 이전 게시물에 정리해둠!!)

✅ 2. State객체

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

• 컴포넌트의 state는 객체이다.
• 객체 안의 key 이름은 원하는대로 설정할 수 있다. (위에서는 색 정보를 담은 데이터를 담기 위해 key 이름을 color로 지정)
• color key의 값으로 “red” 를 value로 지정
• ❓ 왜 state는 객체 형태로 정의하는 걸까?
  결국 컴포넌트 안의 요소에서 그 상태 값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)>에 나타내기 위해서

✅ 3. Event & setState

• setState: 현재 state값을 변경해주는 함수
• push를 통해서도 state수정이 가능하지만 화면에 반영되기 위해선 setState함수를 사용해야 한다.
• state 초기 값은 null로 두는 것보단 특정 type으로 셋팅해주는게 좋다. 그래야 다른 사람이 봐도 이해하기 편하기 때문(ex. value가 String type이라면 null보단 "")

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) <h1> 태그 아래에 <button> 요소 추가
2) <button> 요소에서 onClick 이벤트 발생
3) this.handleColor 함수 실행, this는 현재 컴포넌트(State)를 가르킴
4) handleColor 함수 실행 시 setState 함수 실행
5) state의 color 값을 'blue' 로 변경
6) render 함수 호출
7) 바뀐 state 값을 반영하여 <h1> 태그 글자 색상 변경