[코딩애플;React] class 문법(참고)

예전 리액트에서 사용한 방법이고 지금은 함수형으로 사용하므로 참고만!

 

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

  class Modal2 extends React.Component {

    constructor(){

      super()

    }

 

    render(){

      return (

        <div>안녕</div>

      )

    }

 

  }

-class 함수이름으로 작명함

-constructor, super, render 세 개의 함수를 채워 넣는다. 이것은 기본 템플릿 같은 것

-그리고 render함수 안에 return작성 후 그 안에 컴포넌트로 이용할 html을 적는다.

 

2.class 문법으로 state 만들기

  class Modal2 extends React.Component {

    constructor(){

      super();

      this.state = {

        name : 'kim',

        age : 20

      }

    }

 

    render(){

      return (

        <div>안녕 { this.state.name }</div>

      )

    }

 

  }

-this.state라는 변수를 만들고 거기에 object 형식으로 state 나열

 

3.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>

    )

  }

}

 

-this.setState라는 함수를 가져다가 씀.

 

4.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 작성.