01.10 리액트 함수형 컴포넌트

React.js

01.10. 함수형 컴포넌트

지금까지 컴포넌트는 class 문법을 사용하여 정의하였다. 

import React , { Component } from 'react';

class NewComponent extends React.Component {

    render() {
        return (
            <div>Hello {this.props.name}</div>
        );
    }
}

export default NewComponent;

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

import React from 'react';

function FuncComponent(props) {
    return (
        <div>Hello {props.name}</div>
    )
}

export default FuncComponent;

ES6 화살표 함수와 비구조화 할당 문법 사용하여 컴포넌트 선언

import React from 'react';
// 1. {} 작성
const FuncComponent = ({name}) => {
    return (
        <div>Hello {name}</div>
    )
}
// 2. {} 생략
const FuncComponent = ({name}) => (
        <div>Hello {name}</div>
    )
}

export default FuncComponent;

함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적다.
리액트 프로젝트에서는 state를 사용하는 컴포넌트 개수를 최소화하면 좋다.
※ 프로젝트를 만들 때는 대부분 함수형으로 작성하여 state를 사용하는 컴포넌트 개수를 줄이는 방향으로 state나 라이프사이클 API를 꼭 써야 할 때만 클래스 형태로 변환하여 컴포넌트를 작성한다.