Functional Components에 대해 알아봅시다.

예전에는 단순히 부모 컴포넌트로 받은 값을 출력만 해주는 컴포넌트였습니다. 하지만 최근 리액트 업데이트 이후로 Functional Components는 거의 모든 컴포넌트 선언에 사용되어 리액트 프로젝트에서 빠질 수 없는 부분이 되어버렸습니다.

React Hooks 업데이트 이후로 Functional Components에서도 상태 관리와 LifeCycle API 사용이 가능해졌습니다.

Functional Components의 예제를 살펴봅시다.

import React from 'react';

const Component2 = () => {
  return (<div>Hello World!</div>);
}

export default Component2;

먼저 import/export는 Class Components장에서 설명했으니 생략하도록 하겠습니다. 여기서 중요한 부분은 3번째 줄입니다. ECMA Script 6부터 생긴 새로운 함수 선언 방식입니다.

• Arrow Function