숫자 증감 기능을 제대로 만들어 보기

this.state.count 마음대로 바꿔 보기

state는 객체니까, this.state.count = 1 또는 this.state.count = -1과 같이 값을 바꿀 수 있다고 생각할 수 있습니다.

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.state.count = 1;
  };

  minus = () => {
    this.state.count = -1;
  };
  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

그런데, 코드를 작성하고 저장하면 [Consol] 탭에 Do not mutate state directly...라는 경고 메시지가 나타날 것입니다.

경고 메시지의 내용은 'state를 직접 변경하지 밀라'는 것입니다. 실제로 리액트는 state는 직접 변경하는 코드를 허용하지 않습니다. 그래서 버튼을 눌러도 0이나 1이나 -1로 변하지 않습니다.

 

결과

 

왜냐하면 리액트는 state를 직접 변경하지 못하게 하니까 add(), minus() 함수가 동작하지 않습니다.

원래 리액트는 state가 변경되면 render() 함수를 다시 실행히여 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력합니다. 그런데 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않습니다.

 

경고 메시지 살펴보기

Do not mutate state directly. Use getState( )

 

setState() 함수를 사용해서 state의 값을 변경해야 합니다.

 

setState() 함수로 count state 변경하기

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState({ count: 1 });
  };

  minus = () => {
    this.setState({ count: -1 });
  };
  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

 

setState() 함수가 동작하면 state가 새로운 값으로 바뀌고, 이어서 render() 함수를 동작시켜 화면을 업데이트시키는 겁니다.

 

 

state의 변화에 따라 바뀌는 HTML 살펴보기

[Elements] 탭을 연 다음, div 엘리먼트 옆에 있는 ▶ 표시를 눌러서 펼칩니다.

 

버튼을 번갈아 누르면 변경된 state의 값을 반영하려고 HTML만 바뀔 것입니다.

 

버튼을 누르면 count state의 값을 증가 또는 감소하기

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState({ count: this.state.count + 1 });
  };

  minus = () => {
    this.setState({ count: this.state.count - 1 });
  };
  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

 

state를 업데이트하는 방법은 성능 문제가 있어서 별로 좋지 않습니다.

 

add, minus() 함수 개선하기

다음과 같이 current 인자를 받아 객체({ count : current.count + 1})를 반환하는 함수를 작성하여  setState() 함수에 전달해 봅시다.

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };

  add = () => {
    this.setState((current) => ({
      count: current.count + 1,
    }));
  };

  minus = () => {
    this.setState((current) => ({ count: current.count - 1 }));
  };
  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

 

setState() 함수는 바뀐 state의 데이터만 업데이트힙니다.

state는 동적 데이터를 사용할 때 반드시 도입해야 할 요소입니다.