[React] class component의 state 설정 방법

리액트를 처음배울 때 부터 함수형 컴포넌트를 사용해서 배워서 클래스 컴포넌트를 잘알지 못한다. 하지만 문제해결등을 검색하다보면 클래스 컴포넌트를 기준으로 솔류션이 나올때도있어서 클래스 컴포넌트도 사용법을 익혀 놓고자 한다.

State 지정 / 변경

class Component extends React.Component {

  // state 생성 방법1
  state = {
   count = 99
  }

  // state 생성 방법2
  constructor(props) {
    super(props); //상속을 받고있기 때문에 super를 호출해야함.
    
    this.state = {count: 0}
  }


  render() {
    return (
      <div>
        {this.state.apple}
      </div>
    )
  }

  
  // 📌render함수가 실행되고 내용이 모두 그려진 직후 실행되는 함수
  componentDidMount() { 
    // 첫 랜더 후 1초후 count가 99에서 100으로 변경 
   
    setTimeout(()=>{
       // state 변경 방법 1 객체를 새로 생성하는 방식
      this.setState({
        count: this.state.count + 1,
      });
      
      // state 변경 방법 2 이전 값을 사용하여 값을 지정.
      this.setState((preState)=>{
        //setState함수의 콜백함수의 인자는 state값을 받는다.
        const newState = { count: preState.count + 1}
        return newState;
      })
    }, 1000)
  }

}

state 생성은 방법 1이 편하지만 방법2가 필요한 경우가 있다고 한다. 학습이더 필요한 부분이다.