[React.js] Class component vs Functional component

이번에는 Class component와 Function compoent의 차이점을 알아 보겠습니다.

 

Functional component

 

[특징]

- 제공하는 기능이 한정적임

- 코드가 간단해짐

- 성능이 빠름

import React from 'react'

export default function Hello() {
	return (
    	<div>
        	hello?
        </div>
    )
}

 

Class component

 

[특징]

- 많은 기능들을 사용 가능

- 코드가 길어지고 복잡해짐

- 성능 면에서 조금 느려짐

import React, { Component } from 'react'

export default class Hello extends Component {
	return() {
    	(
    		<div>
        		hello?
        	</div>
    	)
    }
}

Functional 

Functional component는 기능이 한정적이기 때문에 라이프 사이클이라던지 기능을 사용할 수 없었는데요.

Hook 이라는 기능을 통해서 Class component와 동일하게 라이프 사이클 같은 기능을 사용할 수 있도록 업데이트가 되었습니다.