[React] 함수형 컴포넌트

함수형 컴포넌트에 대하여 알아보겠습니다

 

함수형 컴포넌트는 언제 사용해야 할까요?

 

함수형 컴포넌트는 컴포넌트에서 라이프사이클, state등 불필요한 기능을 모두 제거한 상태로써 메모리 소모량이 일반 컴포넌트보다 현저히 적습니다.

 

그렇기 때문에 성능면에서 더 빠른편이죠. 리액트 프로젝트에서 state를 사용하는 컴포넌트의 갯수를 줄이면 줄일 수록 좋습니다

 

반드시 state나 라이프사이클을 사용해야 하는 경우에만 클래스 형으로 변환하여 컴포넌트를 작성하는 것이 좋습니다.

 

그럼 함수형 컴포넌트와 클래스형 컴포넌트에 대하여 알아보아야 구분하기 쉽겠죠?

 

1. 클래스형 컴포넌트

기본적으로 사용하고있는 컴포넌트 입니다 코드를 통하여 한번 알아보죠

import React, { Component } from 'react';

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

export default Hello;

이렇게 적는 것이 클래스를 이용한 컴포넌트 입니다.

여기서 클래스형을 사용하는 이유중 하나는 매번 컴포넌트를 만들때마다 적어야 하는 코드의 양이 많다는 것이죠

 

클래스를 항상 만들고 render 메서드를 만들고 굳이 라이프사이클과 state를 사용하지 않는 컴포넌트인데 이렇게 사용할 필요가 없죠! 더 간단하게 만들 수 있다면 무조건 간단하게 만드는것이 좋죠! 그게 성능이 빨라진다면 더더욱이요!

 

2. 함수형 컴포넌트

그럼 이제 함수형 컴포넌트에 대하여 알아보야겠죠?

 

위의 클래스형 컴포넌트에서 코드양이 줄어듭니다. 한번 보시죠!

import React from 'react';

function hello({title}) => {
  return (
    <div>Hello! {title}</div>
  );
}

export default Hello;

이렇게 줄여서 작성 할 수 있습니다! 이는 쓸모없는 부분을 모두 제거하여 컴포넌트로써의 역할로만 동작하기 때문에 성능이 좋습니다

 

라이프사이클과 state를 사용하지 않아도 되는 컴포넌트라면 함수형 컴포넌트를 사용해 봅시다!