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

박광민·2023년 3월 31일
0

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

  • React에서 컴포넌트를 만들때
    -> 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있음

클래스형 컴포넌트

  1. class 키워드 필요함
  2. Component로 상속을 받아야함
  3. render() 메소드가 반드시 필요함
  4. state, lifeCycle 관련 기능사용이 가능함
  5. 함수형보다 메모리 자원을 더 사용함
  6. 임의 메소드를 정의할 수 있음

  1. class 키워드가 반드시 필요하다.
  2. Component로 상속 받아야 한다.
  3. render() 메소드가 반드시 필요하다.
import React, { Component } from 'react'

class App extends Component {
  render(){
    const name = '클래스 컴포넌트'
    return <div>{name}</div>
  }
}

export default App

함수형 컴포넌트

  1. state, lifeCycle 관련 기능사용 불가능
    -> Hook을 통해 해결
  2. 클래스형보다 메모지 자원을 덜 사용함
  3. 컴포넌트 선언이 클래스형보다 훨씬 편함

  1. 함수형 컴포넌트 선언이 매우 간편하다.
import React from 'react'

const App = () => {
  const name = '함수형 컴포넌트'
  return <div>{name}</div>
}

export default App
profile
developer(Frontend)

0개의 댓글