클래스 컴포넌트 vs. 함수형 컴포넌트

Front-end React

2023-03-27

코드 구조와 기능의 차이

클래스형 컴포넌트

import {Component} from 'react';
export default class MyPage extends Component {
  render() { 
    return <>Hello World!</>
  }
}

클래스형 컴포넌트를 만드는 데 필요한 세가지 요소가 있다.

class 키워드
react > Component를 상속받아야 한다.
render() 메소드를 사용하여야 DOM에 원하는 것을 렌더할 수 있다.

기능

임의 메소드를 정의할 수 있다. (OOP)
state, lifeCycle 관련 기능을 사용할 수 있다

함수형 컴포넌트

export default function Mypage {
  return <>Hello World!</>
}

함수형 컴포넌트의 함수 자체가 렌더 함수이기 때문에 render() 를 사용하지 않아도 된다.

기능

state, lifeCycle 관련 기능은 원천적으로 사용 불가능하다.
- Hook 을 통해 동일한 기능을 업데이트하여 사용할 수 있게 되었다.

state 사용법의 차이

클래스형 컴포넌트

import {Component} from "react";

export default class ClassCounterPage extends Component {
  // class 컴포넌트에서 state 선언 방식
  state = {
    count: 0,
  };

  handleClickIncrement = () => {
    // this.setState를 사용하여 state를 업데이트 할 수 있다.
    this.setState((prev) => ({
      count: prev.count + 1,
    }));
  };
  
  render() {
    return (
      <>
        // this는 class 자기 자신을 뜻한다.
        <div>현재 카운터 : {this.state.count}</div>
        <button onClick={this.handleClickIncrement}>Increment</button>
      </>
    );
  }
}

함수형 컴포넌트

import {useState} from "react";

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

  const handleClickIncrement = () => {
    setCount((prev) => prev + 1);
  };

  return(
    <>
      <div>현재 카운터 : {count}</div>
      <button onClick={handleClickIncrement}>Increment</button>
    </>
  )
}