react에서 state는 컴포넌트 내부에서 바뀔 수 있는 값 을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이다. 컴포넌트 자신은 해당 props를 읽기 전용 으로만 사용할 수 있다.
cf) 앞에서, Mycomponent.js 의 값을 변경하기 위해서는 App.js 부모 컴포넌트의 값을 변경해야했다. 반면, Mycomponent.js 에서는 전달받은 name 값을 직접 바꿀 수는 없었다.

반면, state 는 컴포넌트 내부에서 바뀔 수 있는 값 이다. React 에서는 두 종류의 state가 있다.

1. 클래스형 컴포넌트의 state

• Counter.js

import React, {Component} from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
   this.state = {
    number: 0 
    };
   }
   
 //컴포넌트 생성자 메서드이다.
 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해야한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component클래스가 지닌 생성자 함수를 호출해준다. 
 
 그 다음 this.state 값에 초기값을 설정한다. 컴포넌트의 state는 객체 형식이어야한다.

render() {
 const {number} = this.state;
 // state를 조회할 때는 this.state를 사용한다.
 return (
  <div>
   <h1> {number} </h1>
   <button 
   onClick = {() => 
        {this.setState({number: number + 1 });
    }}
    > 
    // onclick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정한다. this.setState를 사용하여 state에 새로운 값을 넣을 수가 있다.
    +1
   </button>
  </div>
  
 );
 }
    
 
 

render() 함수 안에서 state를 조회할 때는 this.state를 조회하면 된다.

그리고 button 안에 onClick 이라는 값을 props 로 넣어주었는데 이는 버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해준다. 이를 이벤트를 설정한다고 한다.
이벤트로 설정하는 함수는 화살표 함수를 사용한다. 함수 내부에서는 this.setState를 사용하여 state 값을 바꿀 수 있게 해준다.

state 객체 안에 여러 값이 존재할 경우

state 객체 안에는 여러 값이 존재할 수있다.

• Counter.js

import React, {Component} form 'react';

class Counter extends Component {
 constuctor(props) {
  super(props);
  this.state = {
   number : 0,
   fixedNumber : 0
 };
}
render() {
 const { number, fixedNumber } = this.state;
 return (
  <div> 
   <h1> {number} </h1>
   <h2> 바뀌지 않는 값 {fixedNumber} </h2>
   
   <button onClick = {() => 
      {this.setState({ number : number + 1 });
      }}
   >  
     +1
   </button>
  </div>
  
   );
  }
 }
 
 export default Counter;
  
  

state 값 안에 fixedNumber라는 또 다른 값을 추가했다. 그리고 인자로 전달되는 개체 내부에 fixedNumber를 넣어 주지는 않았다. this.setState 함수는 인자로 전달된 객체 안에 들어있는 값만 바꾸어 주었다.

버튼이 클릭될 때, number 값만 변화하고 fixednumber 값은 변화하지 않는다.