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

 

0. 컴포넌트

React는 UI를 작고 이해하기 쉬운 컴포넌트 단위로 나눠 프로젝트를 구조화한다 (Structure).

기능별로 나눈 컴포넌트는 재사용성(Reusability)이 높고,
복잡한 로직이 있더라도 외부에서는 단순한 이름으로 사용할 수 있어 추상화(Abstraction)에 유리하다.

이로 인해 개발자는 전체 흐름에 집중할 수 있고,
UI가 변경될 경우 해당 컴포넌트만 수정하면 되므로 유지보수(Maintainability)가 쉬워지고 안정성도 높아진다.

 

React 에는 두 가지 종류의 컴포넌트가 있다. 클래스 컴포넌트와 함수형 컴포넌트이다.

두 컴포넌트는 동일한 작업을 수행할 수 있지만, 구문과 특정 기능 사용 방법에 차이가 있다.

 

 

import React from 'react';
import { createRoot } from "react-dom/client";
import './index.css';
import Hello from './Hello';
import 'tachyons';

const root = createRoot(document.getElementById('root'));
const element = <Hello greeting="Hello React King" />;	// props 전달
root.render(element);

 

 

1. 클래스 컴포넌트

import React, { Component } from 'react';
import './Hello.css'

class Hello extends Component {
    render() {
        return (
            <div className='f1 tc'>
                <h1>Hello World</h1>
                <p>{this.props.greeting}</p>
            </div>
        )
    }
}

export default Hello;

 

클래스 컴포넌트는 주로 래거시 프로젝트에서 볼 수 있는 방식이다. 

클래스 컴포넌트는 생명주기(Lifecycle) 메서드를 지원하지만,

복잡하고 직관적이지 않으며 안전하지 않아서 향후 React 버전에서 지원되지 않을 예정이다.

또한, 일반적으로 Hooks 를 사용할 수 없다.

 

2. 함수형 컴포넌트

import React from 'react';
import './Hello.css'

const Hello = (props) => {
    return (
        <div className='f1 tc'>
            <h1>Hello World</h1>
            <p>{props.greeting}</p>
        </div>
    )
}

export default Hello;

 

함수형 컴포넌트는 현재 가장 많이 사용되는 방식이다.

문법이 간단하고 작성하기 쉬워서 빠르게 개발할 수 있으며,

useState, useEffect, useContext 등의 Hooks 를 사용할 수 있는 유일한 방식이다.

함수형 컴포넌트 + Hooks 조합이 현재 React 개발의 표준이라고 볼 수 있다.