매번 컴포넌트를 만들 때마다 클래스를 만들고 render 메소드를 만드는 것이 번거롭다.

만약 컴포넌트가 라이프사이클 API와 state를 사용할 필요가 없고 오로지 props를 전달 받아 뷰를 렌더링하는 역할만 한다면 더 간단하게 선언할 수 있다.

import React, { Component } from 'react';

class Hello extends Component {
	render() {
		return (
			<div> Saturday 10am, {this.props.name} </div>
		)
	}
}

export default Hello;

함수형 컴포넌트 사용법

순수 함수로 컴포넌트 생성

import React from 'react';

function Hello(props) {
	return(
		<div> Saturday 10am, {props.name} </div>
	)
}

export default Hello;

ES6의 화살표 함수와 비구조화 할당 사용

import React from 'react';

const Hello = ({name} => {
	return (
		<div> Saturday 10am, {name} </div>
	)
}

// return 생략
/* const Hello = ({name} => (
	<div> Saturday 10am, {name} </div>
) */

export default Hello;

언제 함수형 컴포넌트?

• 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적다. 리액트 16 버전 이상에서는 함수형 컴포넌트가 클래스형 컴포넌트보다 성능이 더 좋다. 리액트 프로젝트에서는 state를 사용하는 컴포넌트 개수를 최소화 하면 좋기 때문에 대부분 함수형으로 만들고 라이프사이클이나 state를 사용할 경우 클래스형으로 만든다.

  함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

→ 이젠 Hook을 쓰자!

Hook의 개요 - React

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}