state

import React from 'react';

class App extends React.Component {
state={

};

 render() {
  return 여기 태그하고 코드 작성하면 웹에 표시되어요.
  }
 }
 
 export default App;

class 안에 있는 state 는 객체형태의 데이터다.

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

 ./src/App.js
 
 import React from 'react';
 
 class App extends React.Component {
   state = {
     count: 0;
  };
  
   render() {
     return <hh1>The number is: {this.state.count}<//hh1>
     }
     
  }
  
  export defualt App;
  

 
 

그러면 웹 페이지에 The number is: 0 이라고 나온다.

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

./src/App.js

import React from 'react';

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

Add 를 누르면 this.state.count 값을 증가
Minus를 누르면 this.state.count 값을 감소

그렇기 위해서는 두개의 함수가 필요해

• add 함수와 minus 함수 작성하기

  ./src/App.js

import React from 'react';

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

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

minus = () => {
console.log('minus');
};

render() {
return (

); } } export defaulf App; ```