React 함수 컴포넌트, 왜 대세가 되었을까? 클래스 컴포넌트와의 비교를 통해 알아보는 핵심 장점

React 개발에 입문하셨거나 이미 사용 중이시라면 '함수 컴포넌트'라는 용어를 수없이 접하셨을 겁니다. 한때 클래스 컴포넌트가 React의 표준처럼 여겨지던 시절도 있었지만, 훅(Hooks)의 등장과 함께 함수 컴포넌트는 React 개발의 주류로 확고히 자리매김했습니다. 그렇다면 왜 함수 컴포넌트가 이토록 각광받는 것일까요? 오늘 이 글에서는 함수 컴포넌트의 본질적인 개념부터 시작하여, 클래스 컴포넌트와 비교했을 때 어떤 명확한 장점들을 제공하는지 심도 있게 살펴보겠습니다.

함수 컴포넌트란 무엇인가요?

함수 컴포넌트는 말 그대로 JavaScript 함수입니다. 이 함수는 HTML과 유사한 형태의 문법 확장인 JSX(JavaScript XML)를 반환하며, props를 인수로 받아 해당 props에 따라 UI를 렌더링할 수 있습니다. 초기에는 상태를 가질 수 없는 '무상태' 컴포넌트로 불렸지만, useState, useEffect와 같은 훅의 도입으로 이제는 상태 관리 및 생명주기 메서드와 유사한 기능을 함수 컴포넌트 내에서 직접 다룰 수 있게 되었습니다.

728x90

함수 컴포넌트의 주요 특징

• 간결함: 클래스와 관련된 복잡한 상용구 코드(생성자, this 바인딩 등) 없이도 직관적인 함수 형태로 구현되어 코드가 훨씬 간결합니다.
• 유상태 및 무상태: 훅 덕분에 이제 함수 컴포넌트도 얼마든지 상태를 가질 수 있습니다. 필요에 따라 순수한 무상태 컴포넌트로 사용하거나, 훅을 활용하여 복잡한 상태 로직을 구현할 수 있습니다.
• 생명주기 관리: 전통적인 클래스 컴포넌트의 생명주기 메서드를 직접 사용할 수는 없지만, useEffect 훅을 통해 컴포넌트 마운트, 업데이트, 언마운트 시점에 필요한 사이드 이펙트를 효율적으로 관리할 수 있습니다.

왜 함수 컴포넌트를 사용해야 할까요?

단순히 새로운 문법이라는 이유만으로 함수 컴포넌트가 대세가 된 것은 아닙니다. 실제 개발 과정에서 경험할 수 있는 여러 가지 실질적인 이점들이 함수 컴포넌트의 채택을 가속화했습니다.

1. 코드 가독성 향상

함수형 접근 방식은 복잡성을 줄여 코드의 가독성을 크게 향상시킵니다. 코드를 읽는 것만으로도 컴포넌트의 기능을 쉽게 파악할 수 있으며, 클래스 컴포넌트에서 자주 발생하는 this 바인딩 문제나 복잡한 생명주기 메서드 체인을 고민할 필요가 없습니다. 이는 특히 협업 환경에서 코드 이해 및 유지보수 비용을 낮추는 데 크게 기여합니다.

2. 성능 최적화 잠재력

많은 경우 함수 컴포넌트는 불필요한 오버헤드를 피할 수 있어 클래스 기반 컴포넌트보다 더 나은 성능을 제공할 잠재력을 가지고 있습니다. React 내부적으로도 함수 컴포넌트와 훅을 중심으로 최적화가 이루어지고 있으며, 이는 애플리케이션의 반응성 향상으로 이어질 수 있습니다. 물론, 최적화는 컴포넌트 설계 방식에 따라 달라질 수 있으므로 무조건적인 성능 우위는 아닐 수 있습니다.

3. 훅(Hooks)과의 완벽한 통합

훅은 함수 컴포넌트가 대세가 된 가장 결정적인 이유 중 하나입니다. 훅은 클래스 없이도 함수 컴포넌트 내에서 직접 상태, 사이드 이펙트, 컨텍스트 등을 관리할 수 있게 해줍니다. 이를 통해 코드가 더욱 깔끔하고, 재사용 가능한 로직을 쉽게 분리하여 사용할 수 있게 되어 유지보수성이 크게 향상됩니다. useState, useEffect, useContext, useRef, useCallback, useMemo 등 다양한 훅들을 통해 우리는 더욱 강력하고 유연한 컴포넌트를 만들 수 있습니다.

간단한 함수 컴포넌트 예시: 카운터 만들기

다음은 함수 컴포넌트를 사용하여 기본적인 카운터를 만드는 방법을 보여주는 예시입니다. 이 예시를 통해 실제 코드에서 함수 컴포넌트가 어떻게 작동하는지 쉽게 이해할 수 있습니다.

import React, { useState } from 'react';

const Counter = () => {
    // count라는 상태 변수를 선언하고 초기값을 0으로 설정합니다.
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
};

export default Counter;

이 예시에서는 useState 훅을 사용하여 count라는 상태 변수를 선언하고, 버튼 클릭 시 setCount 함수를 통해 count 값을 증가시킵니다. 보시다시피 매우 직관적이고 간결합니다.

클래스 컴포넌트에 대한 함수 컴포넌트의 장점 (정리)

다시 한번 클래스 컴포넌트와 비교하여 함수 컴포넌트의 핵심적인 장점들을 정리해보겠습니다.

1. 더 적은 상용구 코드

• 생성자나 this 바인딩과 같은 불필요한 코드가 없습니다.
• render() 메서드 없이도 JSX를 직접 반환하여 코드를 더 간결하게 만듭니다.

2. 더 쉬운 테스트

• 함수 컴포넌트는 인스턴스에 묶인 내부 상태가 없는 순수 함수(또는 훅을 사용하더라도 함수형으로 관리)이기 때문에 테스트가 훨씬 간단해집니다. 각 기능을 독립적으로 테스트하기 용이합니다.

3. 함수형 구성

• 클래스의 복잡한 상속 체인을 관리하는 것보다 여러 개의 작은 함수형 단위를 쉽게 구성할 수 있습니다. 이는 코드의 모듈성과 재사용성을 높여줍니다.

4. 훅(Hooks)을 통한 강력한 기능

• useEffect와 같은 훅을 사용하여 생명주기 메서드와 유사하게 사이드 이펙트를 처리하면서도 더 깔끔한 논리 흐름을 제공합니다. 훅은 컴포넌트의 재사용 가능한 상태 로직을 캡슐화하는 강력한 방법을 제공하여 코드의 응집도를 높여줍니다.

결론

함수 컴포넌트는 React에서 애플리케이션을 구축하는 방식의 진화를 대표합니다. 간결하고, 읽기 쉬우며, 훅을 통해 강력한 상태 및 사이드 이펙트 관리 기능을 제공함으로써 코드를 깔끔하고 유지보수하기 쉽게 유지하는 방법을 제시합니다. ReactJS의 중급 개념을 더 깊이 탐구할수록, 이러한 단순하지만 강력한 구성 요소인 함수 컴포넌트가 어떻게 작동하는지 이해하는 것은 견고하고 효율적인 애플리케이션을 구축하는 데 매우 중요할 것입니다. 이제 여러분의 React 개발 여정에서 함수 컴포넌트를 적극적으로 활용하여 더욱 생산적이고 즐거운 코딩을 경험해 보세요!