[React] Component - 클래스형, 함수형 컴포넌트

클래스형 컴포넌트에는 두 종류의 클래스(Component, PureComponent)를 사용한다.

Component 알아보기

Component 클래스는 프로퍼티, state와 생명주기 함수가 들어있는 구조의 컴포넌트를 만들 때 사용한다.

import React, { Component } from "react";
import PropComponent from "./03/PropsComponent";

class App extends Component {
  render() {
    return <PropComponent name="두잇 리액트" />;
  }
}

export default App;

PureComponent 알아보기

PureComponent 클래스는 Component 클래스를 상속받은 클래스이다. PureComponent 클래스는 shouldComponentUpdate() 함수를 '얕은 비교'를 하도록 재정의했다. 즉, PureComponent 클래스로 만들어진 컴포넌트는 '얕은 비교를 통해 데이터가 변경된 경우'에만 render() 함수를 호출한다. 반면 Component 클래스로 만들어진 컴포넌트는 항상 render() 함수를 호출한다.

얕은 비교 알아보기

이러한 PureComponent를 이용해 앱의 성능을 높일 수 있다.

함수형 컴포넌트

함수형 컴포넌트는 조금 길게 표현하여 state가 없는 함수형 컴포넌트(Stateless Functional Component)라고 부른다. 이를 줄여 SFC라고도 부른다. 이름에서 알 수 있듯 함수형 컴포넌트는 state를 포함하지 않으며 데이터를 받아 출력할 컴포넌트를 반환한다.

함수형 컴포넌트는 함수와 동일한 구조를 가지고 있으므로, 입력받은 프로퍼티와 컨텍스트를 이용하여 화면에 출력한다.

아래의 코드는 함수형 컴포넌트를 사용한 예제이다.

import React from 'react';
import PropTypes from 'prop-types';

function SFC(props, context) {
  // 클래스 컴포넌트의 this.props값과 동일합니다.
  const { somePropValue } = props;
  // 클래스 컴포넌트의 this.context와 동일합니다.
  // context는 차후에 자세히 다룰 예정입니다.
  const { someContextValue } = context;
  return <h1>Hello, {somePropValue}</h1>;
}

SFC.propTypes = { somePropValue: PropTypes.any };
SFC.defaultProps = { somePropValue: 'default value' };

export default SFC;

위에서 보듯 함수형 컴포넌트에는 클래스 선언이 없다. 상위 컴포넌트로부터 전달받은 프로퍼티와 컨텍스트만을 이용하여 화면을 구성한다. 또한 함수형 컴포넌트는 state와 생명주기 함수를 사용할 수 없다. 그러므로 함수형 컴포넌트는 단순한 구조의 UI 컴포넌트를 제작할 때 많이 사용된다.

참고 : Do it! 리액트 프로그래밍 정석