React.js - class component

옛날에는 lifecycle component는 class component에서 밖에 사용이 되지 않았다. 하지만 이젠 function component에서도 lifecycle component가 사용이 가능하여 대부분 function component를 사용한다. 하지만 class componenet를 사용하는 곳도 있기에 정리를 할 필요를 느꼇다.

class component의 단축키는 rcc이다.

function component -> class component

• function component

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

function App() {
  const [count, setCount] = useState(0);
  const increase = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <div>state:{count}</div>
      <button onClick={increase}>클릭!</button>
    </div>
  );
}

export default App;

• class component

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

export default class AppClass extends Component {
    constructor(props){ // constructor 리액트에서 제공하는 lifecycle 함수 중 하나 (생성자) : 컴포넌트가 실행되자 마자 함수실행
        super(props)
        this.state = {
            count: 0,
            value: 0
        };
    };

    increase = () => {
        this.setState({
            count: this.state.count + 1,
            value: this.state.value + 1
        });  
    };

    render() {  
    return (
    <div>
      <div>state:{this.state.counter2}</div>
            <button onClick={this.increase}>클릭!</button>
            <BoxClass num={this.state.value} />
    </div>
    )
  }
}

function 컴포넌트는 const [counter, setCounter] = useState(0); 이런 식으로 state를 하나하나 따로 만들었다면
class 컴포넌트는 state라는 객체를 하나 만들고 그 안에 내가 원하는 state를 다 넣으면됌
위와 같이 기본 구조가 다르다.