State

이 글은 React의 State에 관한 문법 및 개념을 정리하기 위해 작성하였습니다.

---

< State >

React components will often need dynamic information in order to render. For example, imagine a component that displays the score of a basketball game. The score of the game might change over time, meaning that the score is dynamic.

There are two ways for a component to get dynamic information : props and state

 

 

---

< Setting Initial State >

To set a component's initial state.

 

< Syntax >
1. Unlike props, a component's state is not passed from outside. A component decides its own state.
2. To make a component have state, give a state property inside of a constructor method.
3. this.state should be equal to an object.

 

ex)

class Example extends React.Component {
  constructor (props) {
    super(props);
    this.state = { mood: 'decent'}
  }
  ...
}

 

+. React Component always have to call super in their constructors to be set up properly.

 

 

---

< Access a Component's state >

To access a component's state, use the expression this.state.name-of-property

 

ex)

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Best App'};
  }
	
  render() {
    return (
      <h1>
        {this.state.title}
      </h1>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

< Result in Browser >

 

 

---

< Update state with this.setState >

To update state using this.setState( )

 

< Syntax >

1. this.setState( ) takes two arguments : an object that will update the component's state, and a callback.
( callback function is optional )
-> this.setState( ) takes an object, and merges that object with the component’s current state. If there are properties in the current state that aren’t part of that object, then those properties remain how they were.

2. this.setState( ) AUTOMATICALLY calls .render as soon as the state has changed.

 

ex 1)

{
  mood: 'great',
  hungry: false
}
this.setState({hungry: true});

// return
{
  mood: 'great',
  hungry: true
}

 

ex 2) In Practice

import React from 'react';
import ReactDOM from 'react-dom';

class Mood extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mood: 'good' };
    this.toggleMood = this.toggleMood.bind(this);
  }

  toggleMood() {
    const newMood = this.state.mood == 'good' ? 'bad' : 'good';
    this.setState({ mood: newMood });
  }

  render() {
    return (
      <div>
        <h1>I'm feeling {this.state.mood}!</h1>
        <button onClick={this.toggleMood}>
          Click Me
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Mood />, document.getElementById('app'));

< Result in Browser >

 

 

+. When you write a component class method that uses this, then you need to bind that method inside of your constructor function!

 

Reference : https://blueshw.github.io/2017/07/01/arrow-function/

[ES6, react] 리액트에서 화살표 함수(arrow function)는 선택이 아닌 필수