[React.js] State

1. State

state는 해당 컴포넌트가 자체적으로 가지고 있는 객체로, 동적으로 값을 변경시킬 필요가 있을 때 사용한다. 

 

import React, { Component } from 'react';
import Child from './Component/Child';
import Counter from './Component/Counter';
    
class App extends Component {
  render() {
    return (
      <div>
          Hello, World!
          <Child name="react!" />
          <Counter />
      </div>
    );
  }
}

export default App;

우선 부모 컴포넌트에서 Counter 컴포넌트를 import하고 render 함수로 반환시킨다.

 

import React, { Component } from 'react';

class Counter extends Component {

  state = {
    number: 0
  }

  render() {
    return (
      <div>
          Counting number: {this.state.number}
      </div>
    );
  }
}

export default Counter;

이름 그대로 숫자를 카운팅하는 Counter 컴포넌트는 위와 같이 정의했다. render 함수 전에 state를 만들고, number 값을 0으로 정의해 두었다. 이후 render의 반환값에 {this.state.number}를 통해 number 값을 호출하면, 현재 number 값인 0이 출력된다. 이 값은 변경될 필요가 있기 때문에 부모 요소가 Props로 전달해 주지 않고, 컴포넌트 내부에 state로서 존재한다.

 

 

2. setState

import React, { Component } from 'react';

class Counter extends Component {

  state = {
    number: 0
  }

  handleIncrease = () => {
    this.setState(current => {
      number: current.number + 1
    });
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <div>
          Counting number: {this.state.number}
        </div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;

값을 비동기적으로 변경시키기 위해 각각 handleIncrease, handleDecrease 함수를 만든다. state의 값을 변경시킬 때는 반드시 this.setState() 함수를 이용해 값을 변경해야 한다. setState를 호출할 때마다 react가 rerendering 된다. setState() 함수를 이용해 값을 변경할 때도, 반드시 위와 같이 괄호 안에 객체의 형태({key: value})로 값을 변경해야 하며, 화살표 함수로 작성해야 this를 전달받을 수 있다. 화살표 함수를 이용하지 않는다면, this가 undefined가 되어 버리므로, 컴포넌트가 실행될 때마다 호출되는 함수인 Constructor에 super(props)를 실행시킨 후, bind 함수를 통해 this를 바인딩해 주어야 한다. 또, handleIncrease를 정의한 것처럼, setState는 현재 스테이트를 매개변수로 전달해 줄 수 있으므로(current) 이를 전달해 값을 변경하는 것이 더 효율적이다.

 

number에 각각 1을 더하거나 빼는 함수를 작성해 주었다. 여기에 이벤트 리스너를 적용할 때는 HTML과 유사하게 태그에 onClick 속성을 부여하여 실행시킨다.

 

 

이렇게 버튼이 만들어지고, 버튼의 +, -를 클릭함으로써 Counting number의 값을 1씩 더하거나 뺄 수 있다.