[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

리액트의 컴포넌트 선언 방식

리액트에서 컴포넌트를 선언하는 방식에는 클래스형과 함수형 두 가지가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 현재는 공식 문서에서 함수형 컴포넌트와 리액트 훅(hook)을 함께 사용할 것을 권장하고 있다. 하지만 아직 클래스형 컴포넌트를 사용하는 기업도 있을 수 있으니, 기본 형태와 두 가지 방식 간의 차이점은 알아둘 필요가 있다. (유지보수를 위해서도 필요함)

 

클래스형 컴포넌트란?

import React, { Component } from "react";
// Next.js를 사용하는 경우 React는 import하지 않아도 된다.

export default class ClassComponentPage extends Component {

  render() {
    return (
        <div>JSX 영역</div>
    );
  }
}

클래스형 컴포넌트의 기본 형태는 위와 같다.

• state, 생명주기(lifeCycle) 관련 기능을 사용할 수 있다.
• this를 사용해서 state / props / refs / 컴포넌트 메소드 / 생명주기 메소드를 참조할 수 있다.
• 이 때 bind(this)를 사용해 클래스 내부의 요소를 명시하지 않으면 최상단의 window를 this로 인식하게 되므로 주의가 필요하다. (화살표 함수로 함수를 선언하는 경우에는 bind()를 사용하지 않아도 된다.)
• 함수형에 비해 상대적으로 메모리를 많이 사용한다.
• 컴포넌트를 사용하기 위해 react의 Component를 반드시 import 해줘야 한다.

 

클래스형 컴포넌트 예시

import React, { Component } from "react";

export default class ClassCounterPage extends Component {
  state = {
    count: 0,
  };

  onClickCounter = () => {
    this.setState((prev) => ({
      count: prev.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <div>현재카운트: {this.state.count}</div>
        <button onClick={this.onClickCounter.bind(this)}>카운트 올리기</button>
      </div>
    );
  }
}

 

함수형 컴포넌트란?

import React from 'react'
// Next.js를 사용하는 경우 React는 import하지 않아도 된다.

export default function FunctionComponentPage(){
	return(
    	<div>JSX 영역</div>
    )
}

함수형 컴포넌트의 기본 형태는 위와 같다.

• state, lifeCycle 관련 기능은 사용할 수 없다.
• 리액트 훅(Hook)이 도입되며 위의 단점은 상쇄되었다. (useState, useEffect 등을 사용해서 구현 가능해짐)
• 클래스형에 비해 상대적으로 적은 메모리를 사용한다.
• 컴포넌트 선언이 편하고 클래스형에 비해 심플한 구조를 가지고 있다. 현재 리액트의 공식 문서는 함수형 컴포넌트 선언을 권장한다.

 

함수형 컴포넌트 예시

import React, { Component, useState } from "react";

export default function FunctionCounterPage() {
  const [count, setCount] = useState(0);
  const onClickCounter = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <div>현재카운트: {count}</div>
      <button onClick={onClickCounter}>카운트 올리기</button>
    </div>
  );
}