[React] 컴포넌트의 데이터 관리 ② - state 스테이트

2020/08/18 - [Web프런트엔드/리액트] - [React] 리액트 개발환경 구축

2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트에서 사용하는 JSX

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자

2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티

---

 지난 포스팅에는 프로퍼티를 이용해 서로 다른 컴포넌트간의 데이터 관리를 배웠습니다.

하지만 프로퍼티는 변경이 불가능한 읽기전용이며, 부모에서 자식으로만 전달이 가능했습니다.

이번에는 컴포넌트의 내부 데이터(상태)를 관리하는 state 객체에 대해 배워보겠습니다.

 

// ..\test_project\src\App.js

import React, { Component } from "react";
import StateComponent from "./components/StateComponent";

class App extends Component {
  render() {
    return (
      <div>
        <StateComponent />
      </div>
    );
  }
}

export default App;

 

 이번에는 먼저 메인(부모) 컴포넌트라 할 수 있는 App 컴포넌트를 수정했습니다. 너무 간단해서 먼저 넣었습니다.

그냥 StateComponent를 자식으로 화면에 뿌려 주는게 끝입니다. 그럼 다음은 StateComponent를 만들어보겠습니다.

 

// ..\test_project\src\components\StateComponent.jsx

import React, { Component } from "react";

class StateComponent extends Component {
  // 클래스 생성자 (ES6 관련 포스팅에서 설명)
  constructor(props) {
    // 생성자 정의를 하면 꼭 props를 전달
    super(props);

    // 스테이트값은 꼭 초기화!!!
    this.state = {
      count: 1,
      isTen: false,
    };

    // countUp함수에서 this.state 객체인식을 위해 바인딩
    this.countUp = this.countUp.bind(this);
  }

  countUp() {
    // 숫자 증가
    const countTemp = this.state.count + 1;
    let isTenTemp = this.state.isTen;

    // 10이상이면 true
    if (countTemp >= 10) isTenTemp = true;

    // 스테이트값 변경은 꼭 리액트의 setState 메서드 사용
    this.setState({
      count: countTemp,
      isTen: isTenTemp,
    });

    // 로그를 보면 값이 바로 변경되지 않고 한타임 느리게 바뀜
    console.log("countUp함수에서 값 : ", this.state.count);
  }

  render() {
    return (
      <div>
        <p>숫자값 : {this.state.count}</p>
        <p>10이상 : {String(this.state.isTen)}</p>
        <button onClick={this.countUp}>카운트</button>
      </div>
    );
  }
}

export default StateComponent;

 

 오늘은 이부분이 전부이기 때문에 뒤쪽에 넣었습니다. 여기서 중요한 부분은 state 값은 꼭 초기화해야 한다는 것

그리고 this 범위를 위해 bind 하는 부분, 마지막으로 state 값은 꼭 setState()를 사용해 변경한다는 것입니다.

실제로 실행해서 버튼을 누르면 숫자가 증가하고 10 이상이 되면 true로 값이 변합니다. 하지만 콘솔 로그를 보면

this.state.count 값이 바로 바뀌지 않는데, 그것이 바로 state값은 리액트 내부에서 관리하기 때문입니다.

그렇기 때문에 일단은 위에 적은 대로 필수 사용법은 꼭 지켜야 합니다. 조금 더 자세한 내용은 바로 다음 포스팅에~!

 

그럼 오늘은 여기까지

참 쉽죠?

---

2020/09/21 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수