class 컴포넌트

class 문법은 간단하게 말하면 변수, 함수 많이 보관하는 통이다.

 

필수적으로 들어가야 할 내용은 constructor, super, render가 들어간다. 

class Modal2 extends React.Component{
  constructor(){
  super()
}
  render(){
    return(
      <div>안녕</div>
    )
  }
}

class에서 컴포넌트 만들려면 this.state =() 이런 형식으로 컴포넌트를 만들 수 있다.

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

중괄호 {} 넣으면 변수랑 state를 넣을 수 있다.

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

state를 변경하고 싶으면 this.setState 함수 안에다가 넣으면 변경이 된다.

이친구는 특이하게도 기존 스테이트에 변경사항을 갈아치워 주는게 아니라 기존 스테이트에 변경사항만 반영합니다.

차이점만 분석해서 차이점만 넣어주는면은 간편할 수 있다.

        <button
          onClick={() => {
            this.setState({ age: 21 });
          }}
        >
          버튼
        </button>

마지막으로 부모가 받은 props를 받으려면 아래와 같이 적으면 된다.

사실 class컴포넌트 같은 경우에는 옛날에 사용한 컴포넌트이고 지금은 거의 함수형 컴포넌트를 사용하고 있어서 함수형 컴포넌트만 알아도 충분할 수 있다고 생각한다.

리액트 공식문서에도 calss컴포넌트 보다는 함수형 컴포넌트를 쓰는것을 더 추천하는데 이에 관한 내용은 리액트 공식문서를 보기 바란다.

class Modal2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "kim",
      age: 20,
    };
  }
  render() {
    return (
      <div>
        안녕 {this.props}
        <button
          onClick={() => {
            this.setState({ age: 21 });
          }}
        >
          버튼
        </button>
      </div>
    );
  }
}