[React] 함수(Function) 컴포넌트 vs 클래스(Class) 컴포넌트 차이가 뭘까요?

[React] 함수(Function) 컴포넌트 vs 클래스(Class) 컴포넌트 차이가 뭘까요?

📖 들어가며

함수 컴포넌트 도입

리액트에서 함수 컴포넌트는 리액트가 처음 생겼을 때부터 있었지만, 처음에는 상태관리나 생명주기 메소드를 사용할 수 없어서 주로 단순한 표현을 위한 용도로 사용되었습니다.

 

하지만, 리액트 16.8 버전에서 Hooks가 도입되면서 함수 컴포넌트에서도 상태관리와 생명주기 메소드와 유사한 기능을 활용할 수 있게 되었습니다.

 

Hooks의 도입은 함수 컴포넌트의 활용 범위를 크게 확장시키고, 현재는 함수 컴포넌트만으로도 대부분의 기능을 구현할 수 있게 되었고, 그 결과 함수 컴포넌트의 사용이 크게 늘었습니다.

실제로 리액트 공식문서에서도 클래스 컴포넌트보다 함수 컴포넌트로 작성하는 것을 권장하고 있습니다.

함수형(Functional)이 아니라 함수(Function) 컴포넌트라고 부르는 이유
함수형 프로그래밍(Functional Programming)에서 '함수형'이라는 용어는 순수 함수(pure function), 불변성(immutability), 사이드 이펙트 없음(side-effect free) 등과 같은 특성을 강조하는데, 리액트 함수 컴포넌트는 순수 함수가 아니고 사이드 이펙트가 일어나는 등과 같은 이유로 리액트는 '함수 컴포넌트'라는 말이 용어가 더 정확합니다.

클래스 컴포넌트의 사용 감소

• 함수 컴포넌트에 비해 상대적으로 복잡합니다.
• 클래스 문법, this 바인딩, 생명주기 메소드 등을 이해해야 하며 코드가 더 길어지면서 함수 컴포넌트에 가독성이 비해 떨어집니다.
• 함수 컴포넌트에 도입된 Hooks로 인해 클래스 컴포넌트에서만 가능했던 상태관리와 라이프사이클과 유사한 동작을 수행할 수 있습니다.
• 클래스 컴포넌트는 인스턴스를 생성하기 때문에 각 인스턴스마다 메모리를 사용합니다. 반면, 함수 컴포넌트는 인스턴스를 생성하지 않기 때문에 메모리 사용량이 적습니다.
• 클래스 컴포넌트는 클래스의 관련된 다양한 메소드와 프로토타입을 가지고 있어서, 번들링된 결과물의 크기가 커질 수 있습니다. 반면, 함수 컴포넌트는 필요한 기능만을 Hooks로 가져와 사용하므로 번들링된 결과물의 크기를 줄일 수 있습니다.

이러한 이유로 최근에는 함수 컴포넌트를 더 선호하는 추세가 되었습니다.

하지만, 아직도 클래스 컴포넌트를 사용하는 경우도 많기 때문에 클래스 컴포넌트에 대한 이해도 중요합니다.

클래스(Class)  컴포넌트

클래스 컴포넌트는 ES6의 클래스를 사용하여 정의되며, 생명주기 메소드를 사용할 수 있습니다.

또한 내부 상태(state)를 가질 수 있어 데이터 변경에 따른 렌더링을 관리할 수 있습니다.

생명주기(Lfie Cycle)

생명주기 메소드는 컴포넌트가 생성, 업데이트, 삭제되는 과정에서 특정 시점에 호출되는 메소드입니다.

• constructor(): 컴포넌트의 생성자 메소드로, 컴포넌트가 생성될 때 가장 먼저 실행됩니다. 초기 상태를 설정하는 등 컴포넌트의 초기화 작업을 수행합니다.
• componentDidMount(): 컴포넌트가 렌더링 후에 실행되는 메소드입니다.
• shouldComponentUpdate(): 컴포넌트가 업데이트되기 전에 실행되는 메소드입니다. 이 메소드가 false를 반환하면 해당 업데이트는 취소됩니다.
• componnetDidUpdate(): 컴포넌트가 업데이트된 후에 실행되는 메소드입니다.
• componentWillUnmount(): 컴포넌트가 제거되기 전에 실행되는 메소드입니다.

React Life Cycle

클래스 컴포넌트의 사용 예시

클래스 컴포넌트의 기본 구조

import React from "react";

class MyClassComponent extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default MyClassComponent;

가장 기본적인 클래스 컴포넌트의 구조입니다.

React.Componnet를 상속받아 클래스를 정의하고 render() 메소드 안에서 JSX를 반환합니다.

상태(state)를 가지는 클래스 컴포넌트

import React from "react";

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.incrementCount}>Click me</button>
      </div>
    );
  }
}

export default MyClassComponent;

constructor()에서 초기 상태를 설정하고, incrementCount 메소드를 통해 상태를 변경합니다.

render() 메소드에서는 상태를 화면에 표시하고, 버튼 클릭 시 incrementCount 메소드를 호출하여 상태를 변경합니다.

생명주기(Lfie Cycle)메소드를 사용하는 클래스 컴포넌트

import React from "react";

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),
    });
  }

  render() {
    return <div>현재 시간: {this.state.date.toLocaleTimeString()}</div>;
  }
}

export default MyClassComponent;

coumpononetDidMount()에서 타이머를 설정하여 tick() 메소드를 주기적으로 호출하게 합니다.

componentWillMount()에서 타이머를 제거합니다.

함수(Function) 컴포넌트

함수 컴포넌트는 함수로 정의되며, 본래 상태와 생명주기 메소드를 가지지 않는다는 특징을 가지고 있었지만 Hooks의 도입으로 상태 관리와 생명주기와 유사한 기능을 가질 수 있게 되었습니다.

Hooks란 함수 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다.

대표적으로 useState(), useEffect() 등이 있습니다.

함수 컴포넌트의 기본 구조

import React from 'react';

function MyFunctionComponent() {
  return <h1>Hello, World!</h1>;
}

export default MyFunctionComponent;

가장 기본적인 함수 컴포넌트의 구조입니다. 함수를 정의하고 그 안에서 JSX를 반환합니다.

함수 컴포넌트에서 생명주기

클래스 컴포넌트에서 사용된 생명주기 메소드들이 함수 컴포넌트에서는 어떻게 동작할까요?

• useState(): 상태를 생성하고 관리하는 Hook으로, 클래스 컴포넌트의 this.state와 this.setState()에 해당합니다.
• useEffect(): 생명주기(Life Cycle)를 관리하는 Hook으로, componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 하나로 합친 것입니다.

컴포넌트 마운트 / 언마운트 시점에 실행되는 useEffect

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Component Did Mount');

    return () => {
      console.log('Component Will Unmount');
    };
  }, []); // 빈 배열을 넣어 마운트 시점에만 실행

  return <div>My Component</div>;
}

export default MyComponent;

특정 상태의 변경을 감지하는 useEffect

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count has changed to ${count}`);
  }, [count]); // count의 변경을 감지

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

export default MyComponent;

📕 마무리

클래스 컴포넌트와 함수 컴포넌트는 선언 방식, 상태 관리 방식, 생명주기 메소드 사용 방식 등에서 차이가 있습니다.

 

함수 컴포넌트와 Hooks는 클래스 컴포넌트의 라이프사이클과 상태 관리 방식을 단순화하고, 가독성을 높이고, 테스트와 유지보수에서 용이함 등 여러 가지 장점을 제공합니다.

 

하지만 이런 장점을 최대한 활용하기 위해서는 기본적으로 클래스 컴포넌트와 해당 생명주기(Life Cycle)가 어떻게 동작하는지 이해하는 것이 중요합니다.

 

따라서, 클래스 컴포넌트의 이해는 함수 컴포넌트와 Hooks 사용에 있어서 중요한 기반 지식이 됩니다.