React 함수형 컴포넌트, 클래스형 컴포넌트 차이점

함수형 컴포넌트

function App() {
  return (
	// HTML이 들어갈 자리
  );
}

클래스형 컴포넌트

import React, { Component } from 'react'

class App extends Component{
	render(){
		return(
			// HTML이 들어갈 자리
		);
	}
}

 

선언의 차이점

일단, 함수형 컴포넌트와 클래스형 컴포넌트는 선언 방식부터 다르다.

function App() {
  return (
	// HTML이 들어갈 자리
  );
}

함수형 컴포넌트는 말 그대로 Javascript의 함수형식으로 되어있는 컴포넌트이다.

 

import React, { Component } from 'react'

class App extends Component{
	render(){
		return(
			// HTML이 들어갈 자리
		);
	}
}

하지만 클래스형 컴포넌트는 class 문법을 사용하여 클래스를 만들어야 하고, 그 클래스는 Component로 부터 상속을 받아야 한다.

또한, Component를 클래스에 상속시켜주기 위해서 해당 App.js 파일에 Component를 import 시켜줘야 한다.

그리고 클래스형 컴포넌트는 render( ) 함수를 사용해야만 한다.

 

기능적 차이점

함수형 컴포넌트

• state, lifeCycle 기능 사용 불가능 ( React에 Hooks가 도입되면서 해결됨 )
• 클래스형 컴포넌트보다 메모리를 덜 쓴다
• 코드가 간결하여 클래스형 보다 사용하기 편하다

클래스형 컴포넌트

• state, lifeCycle 기능 사용 가능
• 함수형 컴포넌트보다 메모리를 더 쓴다
• 임의 메소드 정의가 가능하다.

 

클래스형 컴포넌트에서만 가변적인 데이터를 다루는 state를 사용 가능 했었지만 React에 Hooks가 생기면서 함수형 컴포넌트에서도 마찬가지로 가변적인 데이터를 다룰 수 있게 되었다.

현재는 클래스형 컴포넌트보다 나중에 나온 함수형 컴포넌트가 단점보다 장점이 더 많아서 더 많이 사용하지만, Hooks가 나오기 이전에 React를 이용해 서비스 하는 웹 사이트도 많기 때문에 클래스형 컴포넌트에 대해서도 알아두면 좋다.