컴포넌트를 만들 때 function을 쓰면 되는 걸로 알고 있었다.
근데 예전 리액트에서는 class 문법을 많이 사용했기에, 잘 쓰진 않겠지만 잘 알아두면 좋을 것 같아서 기록한다.

class 문법으로 컴포넌트 만들기

class Modal2 extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      <div>안녕</div>
    )
  }

}

1. class 이름 extends React.Compnent를 쓴다.
2. constructor, spuer, render 함수 3개를 채워놓자. 기본 템플릿값 같은거라고 생각하자(벌써부터 복잡하다)
3. 내가 만들고 싶은 html을 render() return 안에 넣자.

class 컴포넌트에서 state 만들기

class Modal2 extends React.Component {
  constructor(){
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.state.name }</div>
    )
  }

}

1. this.state 라는 변수를 만들고 거기에 object 형식으로 state 를 쭉 나열하자
2. 사용하고싶은 state는 this.state.state이름을 쓰면된다.

class 컴포넌트에서 state 변경하기

class Modal2 extends React.Component {
  constructor(){
    super();
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.state.age }
        <button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
      </div>
    )
  }

}

state 를 변경하고 싶으면 this.setState 라는 기본 함수를 가져다 쓰자
소괄호 안에 새로운 state를 넣으면 기존 state를 업데이트 해준다.

class 컴포넌트에서 props 출력하기

class Modal2 extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.props.프롭스이름 }</div>
    )
  }

}

constructor, super 에 props 파라미터를 넣고, this.props.프롭스 이름 으로 사용하면 된다.

결론
귀찮은게 많아졌다. 그냥 function 컴포넌트를 쓰자