✨ React 정리 - 6) class component, function component와 비교 ✨

✔️ Class Component

클래스문법을 활용한 컴포넌트

1. class문법으로 component 구현

class > construction() : 생성자 함수, state 구현가능 > super() : 부모로 부터 상속받을 함수
class > render() : 실행할 함수, return할 값

class 컴포넌트명 extends React.Component {
  constructor(){ // 생성자 함수, state
    super()
  }

  render(){ // 실행할 함수 , return
    return (
      <div></div>
    )
  }
}

2. class component에서 state 저장 및 사용

super()밑에 this.state사용하여 Object형식으로 state 값을 저장

class Modal2 extends React.Component {
  constructor(){
    super();
    this.state = { // super()밑에 사용하여 Object형식으로 state 값을 저장
      name : 'kim',
      age : 20
    }
  }
  
  render(){
    return (
      <div>안녕 { this.state.name }</div> // state 사용은 this.state.state명 으로 사용한다.
    )
  }
}

3. class component에서 state 변경

setter함수를 사용해서 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}) } // setter함수를 사용하여 state를 변경한다
}>버튼</button>
      </div>
    )
  }
}

4. class component에서 props

constructor(props)에 파라미터로 props를 받아오고 super(props)에 상속한다
this.props.props명 : 상속받은 props 사용한다

class Modal2 extends React.Component {
  constructor(props){ // 생성자 함수에 props를 파라미터로 값 받아오기
    super(props); // props 상속
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>안녕 { this.props.props명 }</div> // 상속받은 props 는 this.props.props명 으로 사용한다
    )
  }
}

✔️ 클래스형 컴포넌트 vs 함수형 컴포넌트

공식 문서에서는 함수형 컴포넌트와 훅을 함께 사용할 것을 권장한다.
컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다`

1. 클래스형 컴포넌트

1. state기능 및 라이프 사이클 기능을 사용할 수 있다.
2. 임의 메서드를 정의할 수 있다.
3. render()함수가 반드시 필요하고, JSX를 반환해야 한다.
4. 과거 prototype을 이용하여 구현한 클래스 문법을 ES6 문법 부터 class 문법을 사용하여 구현 가능하다.
5. setState나 useState와 같은 세터 함수를 반드시 사용하여 조작해야 한다.

2. 함수형 컴포넌트

1. 클래스형 컴포넌트보다 선언하기 편하고, 메모리 자원을 덜 사용한다
2. state와 라이프사이클 API를 사용할 수 없었는데, REACT HOOK이 도입되면서 해결되었다.
3. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 this로 가리킨다
4. setState나 useState와 같은 세터 함수를 반드시 사용하여 조작해야 한다.