[React] class 문법

1. component 만들기

constructor(){ super() } render(){ return( 축약할 html 작성) }

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

 

2. state 만들기

1. this.state 라는 변수만들기

2. this.state = { 자료이름 : 자료값 -> object 형식으로 state 나열  }

3. this.state.state이름 으로 state 사용

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

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

}

 

3. state 변경

1. this.setState() : 기본함수 사용

2. this.setState(새로운 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>
    )
  }

}

 

4. props

1. constructor, super에 props 파라미터 등록

2. this.props.props 이름  입력

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

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

}