class component

기본형식

// App()..

<Modal></Modal>

// ----------------------------------------------

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

return 안에 축약할 html코드가 온다.

<Modal /> 컴포넌트를 사용할 때 마다 <div>안녕</div> 이 나온다.

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변경

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() 기본 함수로 소괄호 안의 값이 기존 state를 대체한다.

props

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

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

}

부모가 보낸 props를 출력하고 싶다면 constructor() , super() 에 props 파라미터를 적어주고 this.props.props이름 .