[React] 리액트 - 함수형 컴포넌트 (Functional Component)

안녕하세요. 이번 포스팅에서는 함수형 컴포넌트(Functional Component) 사용법에 대해서 알아보도록 하겠습니다. 

 

---

지금까지 Component를 정의하기 위해서는 ES6 기반의 class 문법을 사용하여 정의하였습니다. 컴포넌트(Component)에서 Component Life Cycle API를 사용하는 경우나 state를 사용하는 경우에는 아래와 같이 항상 정의해왔습니다.

import React, { Component } from 'react';

class MyComponent extends Component
{    
    render(){
        return(
            <div>
                <h1>Hello World!! My Name is {this.props.name}</h1>
            </div>
        );
    };
}

export default MyComponent;

▼ 매번 class를 생성하고 그 안에 render 함수를 구현하는 게 번거로울 수 있습니다. 만약 특정 컴포넌트(Component)를 정의하는데 해당 컴포넌트는 state나 Component Life Cycle ApI를 사용하지 않고 단순히 부모 컴포넌트로부터 props를 전달받아 뷰를 렌더링하는 Component라면 아래와 같이 더 간단하게 표현 가능합니다.

import React, { Component } from 'react';

function MyComponent(props){
    return(
        <div>
            <h1>Hello World!! My Name is {props.name}</h1>
        </div>
    )
}

export default MyComponent;

▼ 차이점은 class와 render 함수를 구현하지 않고 순수 함수만으로 컴포넌트를 선언했습니다. ES6의 화살표 함수와 비구조화 할당 문법을 사용하면 아래와 같이 사용할 수 있습니다.

import React, { Component } from 'react';

const MyComponent = ({name}) => {
    return (
        <div>
            <h1>Hello World!! My Name is {name}</h1>
        </div>
    )
}

export default MyComponent;

▼ 위에서 살펴본 세 가지 형태 모두 결과는 같습니다. 위에서 언급한대로 함수형 컴포넌트를 사용하는 경우는 state나 component Life Cycle API를 사용하지 않고 props를 받아 뷰를 렌더링하는 Component에 한해서 함수형 컴포넌트를 사용합니다. 함수형 컴포넌트의 경우 state나 일부 불필요한 기능들을 제거한 형태라 class 형태로 정의하는 Component보다 메모리 소모량이 적고 성능이 좋습니다.