class

---

코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.

강의 내용 출처는

https://codingapple.com/course/react-basic/

모든 저작권은 코딩애플에게 있습니다.

---

컴포넌트 만들 때

function 컴포넌트이름(){
  return(
    축약할 HTML내용
    )
}

이렇게 만든다고 배웠는데 예전 React에서는 class 라는 문법을 사용했다.
예전 version의 리액트를 볼 일도 있으니 알아보고 넘어가자

class 문법

class 컴포넌트이름 extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      축약할 HTML내용
    )
  }

}

이게 기본적인 틀이고 하나씩 확인해보면

• class 컴포넌트 작명
• constructor, super, render 함수 3개를 넣는다. (기본 템플릿 같은 것)
• return 안에 축약할 html적기

이렇게 만들어서 사용하면된다.

여기서 state를 사용하고 싶으면

class 컴포넌트이름 extends React.Component {
  constructor(){
    super()
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      축약할 HTML내용
    )
  }

}

이렇게 object 자료형처럼 state를 사용하면 된다.

그리고 state 사용하고 싶으면 this.state.state이름 쓰면 된다.

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를 변경할 수 있다.

props 문법

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

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

}

이렇게 하면 된다.

(전체적으로 javascript class, extend, super, constructor 문법과 동일한 모습)