React 컴포넌트의 종류, 함수형 컴포넌트와 클래스형 컴포넌트의 차이점

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 아키텍처를 통해 다양한 UI 요소를 독립적으로 개발할 수 있도록 도와줍니다. React의 컴포넌트는 UI의 개인적인 부분을 정의할 수 있게 해주며, 이는 대규모 애플리케이션 개발에서 코드의 재사용성과 유지 보수성을 높입니다. 본 글에서는 React 컴포넌트의 종류와 함수형 컴포넌트와 클래스형 컴포넌트의 차이점에 대해 심도 있게 논의하겠습니다.

1. React 컴포넌트란?

React 컴포넌트는 UI를 구성하는 독립적인 코드 단위입니다. 각각의 컴포넌트는 고유한 상태와 속성을 가질 수 있으며, 이를 기반으로 UI의 일부를 렌더링합니다. React에서는 크게 두 가지 종류의 컴포넌트가 있습니다: 함수형 컴포넌트(Function Components)와 클래스형 컴포넌트(Class Components)입니다.

2. 함수형 컴포넌트 (Function Components)

함수형 컴포넌트는 JavaScript 함수를 사용하여 정의합니다. 이 함수는 props를 인자로 받아 JSX를 반환합니다. 함수형 컴포넌트는 상태 관리와 라이프 사이클 메서드를 처리하기가 어려운 점이 있었지만, React 16.8버전에서 도입된 Hooks를 통해 이제는 상태를 관리하고 다양한 기능을 추가할 수 있게 되었습니다.

2.1 함수형 컴포넌트의 기본 예제

import React from 'react';

function Greeting(props) {
    return <h1>안녕하세요, {props.name}!</h1>;
}

export default Greeting;

위의 예제에서 Greeting 컴포넌트는 사용자로부터 name이라는 속성을 받아 인사말을 출력합니다. 간결하고 명확한 구조가 함수형 컴포넌트의 장점입니다.

2.2 Hooks를 사용한 상태 관리

함수형 컴포넌트에서 상태를 관리하기 위해서는 React Hooks를 사용할 수 있습니다. useState Hook을 사용하여 컴포넌트 내부의 상태를 정의할 수 있습니다.

import React, { useState } from 'react';

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

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
            <button onClick={() => setCount(count - 1)}>감소</button>
        </div>
    );
}

export default Counter;

위의 Counter 컴포넌트는 버튼 클릭 이벤트를 통해 상태를 업데이트하는 기능을 구현하고 있습니다. useState Hook은 파라미터로 초기 상태를 받고, 배열 구조 분해 할당을 통해 현재 상태와 상태를 업데이트하는 함수를 제공합니다.

3. 클래스형 컴포넌트 (Class Components)

클래스형 컴포넌트는 ES6 클래스를 사용하여 정의합니다. 이 컴포넌트는 render() 메서드를 통해 JSX를 반환하며, 상태 관리 및 기타 라이프 사이클 메서드를 내장하고 있습니다. 클래스형 컴포넌트는 hooks의 도입 이전에 주요한 방식으로 사용되었습니다.

3.1 클래스형 컴포넌트의 기본 예제

import React, { Component } from 'react';

class Greeting extends Component {
    render() {
        return <h1>안녕하세요, {this.props.name}!</h1>;
    }
}

export default Greeting;

위의 예제는 Greeting이라는 클래스형 컴포넌트를 정의합니다. 이 컴포넌트는 props를 통해 전달된 name 속성을 이용하여 인사말을 출력합니다.

3.2 상태 관리 및 라이프 사이클 메서드

클래스형 컴포넌트는 상태 관리와 더불어 라이프 사이클 메서드를 활용하여 컴포넌트의 생명주기를 제어할 수 있습니다. 예를 들어, componentDidMount() 메서드는 컴포넌트가 마운트된 이후에 호출됩니다.

import React, { Component } from 'react';

class Timer extends Component {
    constructor(props) {
        super(props);
        this.state = { seconds: 0 };
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
        }, 1000);
    }

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

    render() {
        return <div>초: {this.state.seconds}</div>;
    }
}

export default Timer;

위의 Timer 컴포넌트는 1초마다 상태를 업데이트하여 경과된 시간을 표시합니다. componentDidMount() 메서드에서 타이머를 설정하고, componentWillUnmount() 메서드에서 타이머를 정리합니다.

4. 함수형 컴포넌트와 클래스형 컴포넌트의 차이

함수형 컴포넌트와 클래스형 컴포넌트 간의 주요 차이점은 다음과 같습니다:

구조: 함수형 컴포넌트는 간단한 함수로 정의되며, 클래스형 컴포넌트는 ES6 클래스를 확장하여 정의됩니다.
상태 관리: 이전에는 클래스형 컴포넌트가 상태 관리의 유일한 방법이었으나, 현재는 함수형 컴포넌트에서도 Hooks를 사용하여 상태를 관리할 수 있습니다.
라이프 사이클: 클래스형 컴포넌트는 라이프 사이클 메서드를 갖고 반면, 함수형 컴포넌트는 useEffect를 통해 생명주기를 제어할 수 있습니다.
코드의 가독성 및 재사용성: 함수형 컴포넌트는 더 간결하며, 코드의 가독성을 높이고 재사용성을 증가시킵니다.

5. 결론

React에서 컴포넌트는 필수적인 요소로, 함수형 컴포넌트와 클래스형 컴포넌트 각각의 장단점이 존재합니다. 최신 React 애플리케이션에서는 주로 함수형 컴포넌트와 Hooks 패턴을 사용하여 효율적이고 가독성이 높은 코드를 작성하는 추세입니다. 그러나 클래스형 컴포넌트도 여전히 유용하며, 기존 코드베이스에서 자주 사용됩니다. 따라서 두 가지 방식을 모두 이해하고 활용할 수 있는 역량이 중요합니다.