Class 이용하여 컴포넌트 생성하기

예전 리액트에서는 class 문법을 사용하였다. 개발하다보면 옛날 코드를 볼 경우도 있으니 참고해두면 좋다. 

 

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

  render(){
    return (
      <div>Hi</div>
    )
  }
}

1. class 컴포넌트 이름을 작명한다. 

2. constructor, super, render 함수 3개 채워넣는다 (생성자)

3. 컴포넌트는 길고 복잡한 HTML을 축약할 때 사용. return 안에 축약할 HTML을 적는다. 

 

 

 

class 컴포넌트 안에서 state 사용

---

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

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

1. this.state 라는 변수를 만들고, 그 안에 object 자료형으로 state 나열하면 된다. 

2. state 사용하고 싶으면 this.state.state이름 형식으로 사용한다. 

 

 

 

 

state 변경하기

---

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

  render(){
    return (
      <div>Hi { this.state.age }
        <button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
      </div>
    )
  }
}

state 변경할 땐, this.setState 라는 기본함수 사용한다. 

소괄호 안에 새로운 state 넣어주면 기존 state 를 업데이트 해준다. 

state 전체를 변경하는 것이 아니라 변경된 차이만 변경해준다. 

 

 

 

 

props 사용하기 

---

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

  render(){
    return (
      <div>Hi { this.props.props이름 }</div>
    )
  }
}

부모가 보낸 props 사용하고 싶을 땐

1. constructor, super 에 props 파라미터 입력하고

2. this.props 쓰면 props 변수 사용할 수 있다. 

 

컴포넌트 만들 때 class는 복잡하기 때문에 최근에는 function 을 사용한다.