[Codecamp-Week4] Class component vs Functional component

혤·2022년 7월 26일

React TIL

어느덧 벌써 4주차에 접어들었고, 내 실력은 4주차에 맞게 향상되고 있는건지 모르겠다..^^
매일매일 새로운걸 배우지만 소화하지 못하고 토해내는 느낌ㅎㅎ

오늘의 블로그는 평소에 자주 쓰던 functional component와 달리 class component에 대해 살펴보고자 한다!

1. Functional component

1) Functional component 란?

Functional component란 말 그대로 JavaScript 함수로 이루어진 React Component를 말한다.

2) Functional component 살펴보기

카운트 올리기 버튼을 누르면 count가 1씩 올라가는 component를 만들어보자! (1) useState를 import해주고 (2) export default function ~을 통해 함수형 컴포넌트형태를 만들어준다. (3) return 안쪽에 JSX를 쓰면 끝!

import {useState} from 'react'

export default function CounterStatePage() {
    const [count, setCount] = useState(0)

    function counterUp() {
        setCount(count + 1)
    }

    return (
        <>
            <div>{count}</div>
            <button onClick={counterUp}>카운트 올리기!</button>
        </>
    )
}

2. Class component

1) class 란?

class란 물건을 만드는 설명서 라고 할 수 있으며, 객체이다.
최근 component를 사용할 때 functional component(함수형 컴포넌트)를 많이 사용하지만, 아직 class component도 흔히 볼 수 있기 때문에 class component도 함께 살펴보자!

2) class component 살펴보기

카운트 올리기 버튼을 누르면 count가 1씩 올라가는 component를 똑같이 만들어보자!
(1) export default function ~ 대신 export default class ~ extends Component를 써주며 (2) useState를 사용하지 못하고 (3) state 사용 시 앞에 this를 써줘야한다. (4) return 안에 JSX를 쓰고 render()로 감싸줘야 한다.

import { Component } from "react";

export default class ClassCounterPage extends Component {
  state = {
    count: 0,
  };

  counterUp = () => {
    console.log(this.state.count);
    this.setState({
      count: 1,
    });
  };

  render() {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.counterUp}>카운트 올리기!</button>
      </>
    );
  }
}