state로 숫자 증감 기능 만들어보기

state는 동적 데이터를 다룰 때 사용합니다.

동적 데이터란 말 그대로 변경될 가능성이 있는 데이터를 말합니다.

 

핵심은 App 클래스기 React.Component 클래스를 상속받도록 extends React.Component를 불이는 것입니다.

import React from "react";

class App extends React.Component {
  
}

export default App;

 

클래스형 컴포넌트가 되려면 App 클래스가 리액트가 제공하는 Component 클래스를 반드시 상속받아야 합니다.

그런데 지금의 App 컴포넌트는 클래스라서(함수가 아니라서) return 문을 사용할 수 없고, 그래서 함수 형태의 App 컴포넌트처럼 JSX를 반환할 수 없습니다. 

클래스형 컴포넌트에서는 JSX를 반환하기 위해 render() 함수를 사용합니다.

import React from "react";

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

export default App;

 

함수형 컴포넌트는 return 문이 JSX를 반환합니다. 하지만 클래스형 컴포넌트의 render() 함수가 JSX를 반환합니다.

그리고 리액트는 클래스형 컴포넌트의 render() 함수가 자동으로 실행시켜줍니다.

 

state 적용하기

state를 사용하려면 state =  { };라고 작성하여 state를 정의하면 됩니다.

import React from "react";

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

export default App;

 

그리고 state를 사용하려면 반드시 클래스형 컴포넌트 안에서, 소문자를 이용하여 state라고 적으면 됩니다.

 

state에 count값 추가하고 사용하기

다음과 같이 state에 count라는 키를 추가하고 키값으로 0을 넣습니다.

그리고  render() 함수에서 {this.state.count}를 출력합니다.

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return <h1>The number is {this.state.count}</h1>;
  }
}

export default App;

 

 

버튼을 눌러서 count state값 변경해보기

import React from "react";

class App extends React.Component {
  state = {
    count: 0,
  };
  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button>Add</button>
        <button>Minus</button>
      </div>
    );
  }
}

export default App;

 

add() 함수와 minus() 함수 작성하기

add() 함수와 minus() 함수를 작성합니다.

import React from "react";

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

  add = () => {
    console.log("add");
  };

  minus = () => {
    console.log("minus");
  };
  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button>Add</button>
        <button>Minus</button>
      </div>
    );
  }
}

export default App;

 

버튼을 누르면 동작하도록 onClick 속성 추가하기

button 엘리먼트에 onClick이라는 속성을 넣고, 속성값으로 this.add와 같이 함수를 넣어주면 됩니다.

import React from "react";

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

  add = () => {
    console.log("add");
  };

  minus = () => {
    console.log("minus");
  };
  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;