React.js Functional Component

React.js Functional Component (함수형 컴포넌트)

React 에서 컴포넌트를 정의 할 때는 보통 EcmaScipt 6 에 도입된 class 문법을 사용한다. 컴포넌트에서 라이프사이클 API 를 사용해야 하거나, state 를 사용하는 경우에는 꼭 이렇게 정의를 해야 했었다.

import React, { Component } from 'react';

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

export default Hello;

React.createClass(…) 를 사용하는 방법도 있지만 요즘 잘 사용되지 않는 추세이다.

만약에 만들어야 하는 컴포넌트가 라이프사이클 API 도 사용하지 않고, state 도 사용하지 않고, 그냥 props 만 전달해주면 뷰를 렌더링만 해주는 역할이라면 함수형 컴포넌트 형식으로 컴포넌트를 정의 할 수 있다.

import React from 'react';

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

export default Hello;

아니면 ES6 의 화살표 함수를 사용해서 만들수도 있다.

import React from 'react';

const Hello = (props) => {
    return (
        <div>Hello {props.name}</div>
    );
}

export default Hello;

위에 코드를 비구조화 할당 (Object Destructuring) 문법을 사용하면 다음과 같이 작성할 수 있다.

import React from 'react';

const Hello = ({name}) => {
    return (
        <div>Hello {name}</div>
    );
}

export default Hello;

컴포넌트를 만드는게 훨씬 더 쉬워졌을 것이다.
참고로 함수형 컴포넌트를 사용 할 때 첫 마운팅 속도에 있어서는 7% ~ 11% 빠르다고 한다.

그럼 이 함수형 컴포넌트를 어떤 상황에 사용해야 하는가?

state 나 라이프사이클 API 를 전혀 사용하지 않을 때, 그리고 해당 컴포넌트는 자체 기능은 따로 없고 props 가 들어가면 뷰가 나온다는 것을 명시하기 위해 사용한다거나 특히, Redux 를 사용하여 컴포넌트들을 구성 할 때, Container 컴포넌트 (혹은 Smart, 컴포넌트) 는 클래스형 컴포넌트를 사용하고, Presentational 컴포넌트 (혹은, Dumb 컴포넌트) 는 함수형 컴포넌트를 사용해볼 수 있다.

참조

• https://velopert.com/2994