react의 클래스

옛날에 쓰던 문법. 어차피 지금은 컴포넌트 만들때 함수형태로 만들어서 안쓰는 문법.
더 간단하게 정리만 넘어감.

1. 형태

• 1. 클래스명 짓기
• 2. constructor, super, render 함수 채워넣기.

• return 안에 html 적기

class Modal2 extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      <div>안녕</div>
    )
  }

}

class가 뭔데?

• class는 변수, 함수 보관하는 통.
  기능과 변수를 하나로 합쳐놓은 형태.
• extends는 기존 class안에 있던 변수, 함수 복사해주는 문법. 대충 java 상속.
  - React.Component라는 class안에 있던 변수와 함수들을 복사해야 컴포넌트라고 인정해주도록 리액트 만든 사람이 정함.

class Modal2 extends React.Component

extends는 class안에 있던 변수, 함수 복사해주는 문법.
React.Component라는 class안에 있던 변수와 함수들을 복사해야 컴포넌트라고 인정해주기 때문에 class 어쩌구 extends React.Component라고 쓰는 것

state 만들기

1. this.state 라는 변수만들고 거기 안에다가 object 형식으로 state 쭉 나열
2. state 사용하고 싶으면 this.state.state이름 쓰기.

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

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

}

state 변경

function 쓸때는, state 변경은 사실상 새로 만들어서 재렌더링하는 식이였음.
하지만 class는 실제로 update를 하는 식.
아래는 버튼을 누르면 this.state의 age를 20 -> 21로 변경하는 코드.

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>
    )
  }

}

props

부모가 보낸 props를 출력하고 싶으면

1. constructor, super에 props 파라미터 등록.
2. this.props 쓰기.

어딘가 java class와 많이 닮은 거 같음.

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

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

}

결론

function 쓰자.