React에서 함수형 컴포넌트를 장려하는 이유

자바스크립트 딥 다이브를 읽다가 문득 궁금해졌습니다. 함수는 호출될 때마다 실행 컨텍스트가 생성됩니다. 이에 반해 클래스는 인스턴스가 생성될 때 생성되는 메소드를 제외하고, 생성된 클래스 객체 자체가 재사용됩니다. 그렇다면, 매번 새롭게 만들어지는 함수형 컴포넌트보다 클래스형 컴포넌트가 메모리 사용 측면에서 더 뛰어난게 아닐까요. 그런데 왜 React에서는 클래스형 컴포넌트보다 함수형 컴포넌트의 사용을 장려하는 것 일까요.

---

import React, { useState } from 'react';

function FunctionalComponent() {
	const [count, setCount ] = useState(0);
    
    function handleButtoClick() {
    	setCount(count + 1);
    }
    
    return (
    	<div>
        	<p>You clicked {count} times</p>
            <button onClick={handleButtonclick}>
            	Click me	
            </button>
        </div>
    )
}
export default FunctionalComponent;

import React, { Component } from 'react';

class ClassComponent extends Component {
	constructor(props) {
    	super(props);
        this.state = { count: 0 };
        this.handleButtonClick = this.handleButtonClick.bind(this);
    }
    handleButtonClick() {
        this.setState({ count: this.state.count + 1 });
    }
    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={this.handleButtonClick}>
                    Click me
                </button>
            </div>
        )
    }
}
export default ClassComponent;

1. 성능이 좋다.

위의 예시에서 볼 수 있듯이 클래스형 컴포넌트는 상태와 생명 주기 메서드 등 여러 메서드가 하나의 컴포넌트에 포함되어 있어있는데 반해, 함수형 컴포넌트는 React Hooks로 상태를 관리, 생명주기를 관리하므로 성능이 뛰어납니다.

 

2. 가독성이 좋다. 간결하다.(테스트 코드 작성 용이)

함수형 컴포넌트는 순수 함수와 비슷한 형태를 갖고 있어, 읽고 이해하는데 좋다. 또한, 이 덕분에 입력 값과 출력 값만으로도 테스트가 가능해 테스트 코드 작성이 쉽습니다.

반면, 클래스형 컴포넌트는 포함하고 있는 여러 메서드를 작성해주어야 하므로 코드가 불필요하게 길어집니다.

 

3. 속도가 빠르다.

함수형 컴포넌트에서 어떠한 처리를 할 때는 React hooks을 import해서 모듈처럼 조립해 사용하는데 반해 클래스에는 모든 필요한 처리가 메소드로 구현되어 있어 불필요한 렌더링이 발생할 수 있습니다.

클래스형 컴포넌트는 상태와 생명주기 메서드를 다루기 위해 복잡한 구조를 가지고 있으며, 불필요한 렌더링을 발생시키기도 합니다. 

 

이렇게 비교해보니 함수형 컴포넌트가 더욱 높은 효율성을 보인다는 것을 알 수 있었습니다.