매번 컴포넌트를 만들 때마다 클래스를 만들고 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을 쓰자!
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>
);
}