React - 함수형 컴포넌트

class 문법 방식

import React, {Component} from 'react';
 
class Hello extends Component {
    render(){
        return(
            <div> Hello {this.props.name}</div>
        )
    }
}
 
export default Hello;

컴포넌트에서 라이프사이클 API과 state를 사용해야 할 때 꼭 사용해야한다.

그런데 만약 라이프사이클 API와 state를 사용할 필요가 없고

오로지 props를 전달 받은 뷰를 렌더링하는 역할만 한다면 

함수형 컴포넌트를 만들면 더 간단하게 선언할 수 있다.

번거롭게 class를 만들고 render()를 만들지 않아도 된다. 

함수형 컴포넌트 

순수한 함수만으로 컴포넌트를 선언 할 수 있다.

ES5 방식

import React from 'react';
 
 
function Hello(props){
    return (
        <div> Hello {this.props.name}</div>        
    )
}
 
export default Hello;

ES6 에로우펀션 방식

import React from 'react';
 
const Hello = ({name}) => {
    return (
        <div> Hello {name}</div>        
    )
}
 
/*
 또는 이런 식으로 {}를 생략할 수도 있다.
    const Hello = ({name}) => (
        <div> Hello {name}</div>
    )
*/
 
export default Hello;

그렇다면 함수형 컴포넌트를 사용해야 되는가? 

함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에

메모리 소모량은 일반 클래스형 컴포넌트보다 적다

리엑트 v16 이상에서는 함수형 컴포넌트 성능이 클래스형 컴포넌트보다 조금 빠르다

리액트 프로젝트에서 state를 사용하는 컴포넌트 개수를 최소화하면 좋다.

따라서 컴포넌트 만들때는 대부분 함수형으로 작성하여 state를 사용하는 컴포넌트 개수를 줄이는 방향으로 향하며,

state나 라이프사이클 API를 꼭 써야할때만 클래스 형태로 변환하여 컴포넌트를 작성하면 된다.