[React]state

state

컴포넌트 내부에서 화면에 보여줄 ui의 상태를 지니고 있는 객체이다. construct에서 정의하고 setState로 데이터를 변경할 수 있다.

state 사용

import React from 'react';

class App extends React.Component {
 constructor() {
 super();
  state = {
    count: 0,
  };

  render() {
    return 
    	<h1>state is ? {this.state.count}</h1>;
  }
}

export default App;

1. constructor에 state안에 객체를 만든다. key는 count이며 value는 0이다.
2. render()를 통해 화면에 보여주며 리턴한 jsx를 화면이 나올 코드이다.
3. return 뒤에 자바스크립트 문법은 {}로 감싸주어야한다.
4. {this.state.count}는 construct 객체를 가리키며 0을 출력한다.

setState 사용

import React from 'react';

class App extends React.Component {
 constructor() {
 super();
  state = {
    count: 0,
  };

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

  minus = () => {
    this.setState({
      count: this.state.count -1
    })
  };

  render() {
    
    <button onClick={this.add}>버튼<button>

export default App;

1. constructor에서 선언된 객체의 값을 함수를 통해 바꿀수 있다.
2. 버튼이 클릭되면 add 함수가 실행되며 이때 add()가 아닌 함수 자체 add를 사용하거나
   화살표함수로 함수를 선언해줄 수 있다.
3. add함수가 실행되며 state의 count값이 바뀌고 다시 render()가 실행된다.