[React] state 사용하기

• state는 동적 데이터를 다룰 때 주로 사용한다
• state는 class형 컴포넌트에서 사용할 수 있는 개념
• class형 컴포넌트가 되기 위해서는 리액트가 제공하는 컴포넌트를 상속받아야 한다

import React from 'react';

class App extends React.Component {
 // React.Component 클래스의 기능을 추가한 App 클래스
}

• class형 컴포넌트는 함수가 아니기 때문에 return을 사용할 수가 없다
• 따라서 JSX를 반환하기 위해서 render()함수를 사용한다 => return 사용 가능

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>I'm a class component</h1>
  }
}

export default App;

state를 사용하기 위해서는 state = {} 작성하여 정의
{this.state}란 현재 클래스에서 선언한 state를 의미함

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

  render() {
    return (
    <div>
      <h1>The number is: {this.state.count}</h1>
    </div>
    )
  }
}

• 주의사항: state를 직접 변경하는 경우에는 render()함수를 다시 실행하지 않음
• 절대 state를 직접 변경하지 말고 setState를 이용해야 함

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

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

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

• state자체를 바꾸는 것은 불가능하지만 setState()를 이용하면
• 우선 리액트가 setState()함수가 동작하는 것을 확인하면 state가 새로운 값으로 바뀌고 이어서 render()함수를 동작시켜 화면을 업데이트 해준다

import React from 'react';

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

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

 minus = () => {
   this.setState(number => ({
     count: number.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;

• 최종본 완성이다
• 여기서 number에는 현재 state값이 넘어오게 되고 count: number.count + 1은 앞에 state에 1을 더한 값을 나타낸다