클래스형 컴포넌트 vs 함수형 컴포넌트
- React에서 컴포넌트를 만들때
-> 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있음
클래스형 컴포넌트
- class 키워드 필요함
- Component로 상속을 받아야함
- render() 메소드가 반드시 필요함
- state, lifeCycle 관련 기능사용이 가능함
- 함수형보다 메모리 자원을 더 사용함
- 임의 메소드를 정의할 수 있음
- class 키워드가 반드시 필요하다.
- Component로 상속 받아야 한다.
- render() 메소드가 반드시 필요하다.
import React, { Component } from 'react'
class App extends Component {
render(){
const name = '클래스 컴포넌트'
return <div>{name}</div>
}
}
export default App
함수형 컴포넌트
- state, lifeCycle 관련 기능사용 불가능
-> Hook을 통해 해결
- 클래스형보다 메모지 자원을 덜 사용함
- 컴포넌트 선언이 클래스형보다 훨씬 편함
- 함수형 컴포넌트 선언이 매우 간편하다.
import React from 'react'
const App = () => {
const name = '함수형 컴포넌트'
return <div>{name}</div>
}
export default App