[React] State & Event

🍷 State

'상태'라는 뜻.

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

• State는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다.
• State는 컴포넌트가 마운트 될 때 기본값을 갖게 되고 우리는 이 State를 활용해 데이터를 변화시켜줄 수 있다.
• 객체의 형태를 갖고 있다.
• State를 변경하기 위해서는 setState 함수를 사용해야 한다.
• class 컴포넌트에서 State를 쓸때는 컴포넌트의 형태가 클래스이기 때문에 this.state로 사용할 수 있다.

코드로 작성해보면 더욱 쉽게 이해할 수 있다!.. 고 한다.

 

🍷 State 객체

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

• Class형 컴포넌트 안에는 필수적으로 render 함수가 필요하고, 화면에 나타내고 싶은 JSX 요소가 return문 안에 들어있다.
• State를 설정할 때는 constructor 함수를 작성하여 설정한다.
• constructor 함수는 컴포넌트 선언문(class State extends Component)과 render 함수 사이에 작성한다.
• constructor 메소드 안에는 super()를 호출한다.
• 그 다음에는 this.state 값에 컴포넌트의 초기 상태 값을 설정해 준다.

 

 

👇🏻 state 객체

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

• 컴포넌트의 State는 이렇게 객체 형태로 정의한다.
• 객체 안의 key 이름은 원하는 대로 설정할 수 있다.

 

🍷 State 사용 예시

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

<h1 style={{ color:  }}>Class Component | State</h1>

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

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

 

🍷 Event & setState

import React, { Component } from 'react';

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;

👉🏻 다음의 순서에 따라서 코드가 실행된다.

• <button> 요소에서 onClick 이벤트 발생
• this.handleColor, 즉 현재 컴포넌트(State)의 handleColor 함수 실행
• handleColor 함수 실행 시 setState 함수 실행 - State의 color 값을 'blue' 로 변경
• render 함수 호출
• 바뀐 State 값을 반영하여 <h1> 태그 글자 색상 변경