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

React에서 컴포넌트를 선언하는 방법은 함수형 컴포넌트로 선언하는 방법과 클래스형 컴포넌트로 선언하는 방법 2가지가 존재한다. 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장 하고 있다. 그렇다고 클래스형 컴포넌트가 사라지는 건아니라고 한다.. 그럼 뭘써야하는겨?? 간단한 컴포넌트는 함수형으로 선언하고 좀 복잡한건 클래스형으로 해야할까? 그건아닌듯.. 그렇게 따지면 함수형으로도 충분히 구현가능..

==> 여기서 정의 내린다.... 컴포넌트는 함수형으로 하는게 좋다.

이유는 훅이 주는 장점이 매우 크고 무엇보다, 리액트팀에서 훅과 관련된 기능 개발을 적극적으로 하고 있기 때문이다.

 

1. 함수형 컴포넌트

// 함수형 컴포넌트 예제
import React from 'react'
import './App.css'

function App(){
	const name = '리액트';
    return <div className="react">{name}</div>;
}

export default app

• 클래스형 컴포넌트 보다 선언하기 쉬움
• 클래스형 컴포넌트 보다 메모리 자원을 덜 소모한다.
• 빌드 후 배포할 때도 함수형 컴포넌트를 사용하는게 결과물의 파일 크기가 더 작다.(사실 큰 차이는 없음)
• 단점은 state와 라이프사이클 API 사용이 불가하다(Hooks 기능이 도입되면서 해결)

 

2. 클래스형 컴포넌트

// 클래스형 컴포넌트 예제
import React, { Component } from 'react'

class App extends Component {

	render(){
    	const name = 'react';
        return <div className="react"> { name } </div>
    }
}

export default App;

• 클래스형 컴포넌트에서는 render 함수가 꼭 있어야하고 그 안에서 보여줘야할 JSX를 반환해야 한다.