[ReactJS]노마드코더 리액트 기초-04. State

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다.

state

• React.js에서는 유동적인 데이터를 사용하기 위해 state 객체를 사용한다.
• props는 매개변수처럼 컴포넌트에 전달되지만 state는 컴포넌트 내에서 관리된다.
• props와 다르게 state 값을 변경할 때는 직접 조작해서는 안되며 setState 메서드를 사용해야 한다. setState 메서드를 사용하는 이유는 React는 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링 하기 때문에 직접 state를 조작하면 React는 변경된 부분을 감지하지 못한다.

state를 사용하여 버튼을 누르면 카운트 되는 예제

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
    this.setState((now) => ({ count: now.count + 1 }));
  };
  minus = () => {
    this.setState((now) => ({ count: now.count - 1 }));
  };
  render() {
    return (
      <div>
        <h1>The number count: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>minus</button>
      </div>
    );
  }
}

export default App;

setState(updater, [callback])

위에 소스코드를 보면 state를 조작하기 위해서 setState메서드를 사용하는 것을 볼수 있다. setState메서드는 컴포넌트 state의 변경 사항을 대기열에 집어넣고, React에게 해당 컴포넌트와 그 자식들이 갱신된 state를 사용하여 다시 렌더링되어야 한다고 알리는 메서드이다.

ko.reactjs.org/docs/react-component.html#setstate

React.Component – React

"TypeError Cannot read property 'setState' of undefined"

위에 소스 코드에서

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

add property를 그냥 메서드로 쓰면 안되나? 라는 생각에 이렇게 고쳐서 소스 코드를 작성 했더니 "TypeError Cannot read property 'setState' of undefined" 에러가 나타났다. 이 에러가 왜 생겼는지에 대한 호기심에 알아 봤다.

//Error
add () {
    this.setState((now) => ({ count: now.count + 1 }));
  };

TypeError ...'setState'...

호출하는 함수가 bind 되지 않아서 에러가 발생한 것이다.

해결방법

 

1. 생성자에서 바인딩 해주기

<button onClick={this.add.bind(this)}>Add</button>

전체 소스코드

class App extends React.Component {
  state = {
    count: 0,
  };
  add() {
    this.setState((now) => ({ count: now.count + 1 }));
  }
  minus = () => {
    this.setState((now) => ({ count: now.count - 1 }));
  };
  render() {
    return (
      <div>
        <h1>The number count: {this.state.count}</h1>
        <button onClick={this.add.bind(this)}>Add</button>
        <button onClick={this.minus}>minus</button>
      </div>
    );
  }
}

 

2. 화살표 함수로 구현하기

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

화살표 함수는 자동으로 바인딩을 해주기 때문에 명시적으로 바인딩을 해주지 않아도 된다.

 

참고

devlog.jwgo.kr/2018/08/20/set-state-undefined-error-in-react/

리액트에서 "TypeError Cannot read property 'setState' of undefined" 가 발생할 때 · Tonic

ko.reactjs.org/docs/react-component.html#setstate

React.Component – React

poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb