🐱 #7 React.js - class component

🧩 class component

class componet가 function component 보다 더 쓰기에 어렵다. 하지만 function component가 나왔음에도 class componet가 더 많이 사용됐다.

그 이유는
1. 많은 개발 문서들이 class componet로 작성이 되어있다.
2. 리액트에서 제공하는 lifecycle function으로 할 수 있는게 되게 많다. 근데 lifecycle function이 class componet에서 밖에 동작이 안된다.

그래서 class componet 사용한 기간이 더 길었다.

하지만!! 2019년 이후부터 function component도 lifecycle function을 사용할 수 있게 되었다.

그래도 알아야 하니까 공부하는 것이다.

🏃‍♂️ function component => class component 로 변경

• function component

import { useState,useEffect } from 'react';
import './App.css';
import Box from './component/Box';

function App() {
  const [counter, setCounter] = useState(0); //state
  const increase =()=>{
    setCounter(counter+1);
  };

  useEffect(()=>{
    console.log("useEffect1 Firee");
  },[]);

  useEffect(()=>{
    console.log("useEffect2 Firee", counter);
  },[counter]) //어레이의 값을 넣으면 컴퓨터가 주시한다.
  return (
    <div>
      {console.log("render")}
      <Box num="1"/>
      <div>{counter}</div>
      <button onClick={increase}>클릭!</button>
    </div>
  );
}

export default App;

• class component

import React, { Component } from 'react'
import './App.css';
import BoxClass from './component/BoxClass';

export default class Appclass extends Component {

    constructor(props){ // constructor 리액트에서 제공하는 lifecycle 함수 중 하나 (생성자) : 컴포넌트가 실행되자 마자 함수실행
        super(props)
        this.state={ // state를 선언한다.
            counter2 : 0, //원하는 state를 선언해 주는 것이다.
            num:1,
            value:0
        };
    }
    /*
        function 컴포넌트는 const [counter, setCounter] = useState(0); 이런 식으로 state를 하나하나 따로 만들었다면
        class 컴포넌트는 state라는 객체를 하나 만들고 그 안에 내가 원하는  state를 다 넣으면됌
        위와 같이 기본 구조가 다르다.

    */
    increase = () =>{
        this.setState({counter2:this.state.counter2 + 1 ,
                        value : this.state.value + 1
        });
        console.log("increase function", this.state);
    }
    componentDidMount(){
      // api 콜
      console.log("componentDidMount");
    }

    componentDidUpdate(){
      console.log("componentDidUpdate", this.state);
    }
  render() {
    console.log("render");
    return (
      <div>
        <div>state: {this.state.counter2}</div> {/* class 컴포넌트를 부를때는 counter2만 선언하는 것이아니라. this.state 를 매번 붙여줘야 한다.*/}
        <button onClick={this.increase}>클릭!</button>
        <BoxClass num={this.state.value}/>
      </div>
    )
  }
}