리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유

 

리액트에서 함수형과 클래스형 컴포넌트 두 가지 방식이 존재하는 이유는 각각의 방식이 개발의 필요와 발전에 따라 다른 장점과 사용성을 제공하기 때문이다.

 

1. 초기 리액트 : 클래스형 컴포넌트의 등장

리액트가 처음 등장했을 때, 컴포넌트의 상태 관리와 생명주기 메서드 등을 사용하려면 클래스형 컴포넌트를 사용해야 했다. 당시 함수형 컴포넌트는 단순히 UI를 반환하는 역할만 할 수 있었다.

그래서 클래스형 컴포넌트가 리액트에서 기본으로 많이 사용되었고, 상태 관리와 복잡한 로직이 필요한 컴포넌트는 클래스로 작성되었다.

 

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

    componentDidMount() {
        // 생명주기 메서드 예시
    }

    render() {
        return <div>{this.state.count}</div>;
    }
}

 

 

2. 함수형 컴포넌트의 발전:  React HOOKS의 등장

리액트는 점차 함수형 컴포넌트를 확장하기 시작했고, 2018년 React Hooks가 도입되면서 함수형 컴포넌트에서 상태(useState)와 생명주기와 관련된(useEffect)등을 사용할 수 있게 되었다.

훅의 등장으로 함수형 컴포넌트는 클래스형 컴포넌트의 기능을 대부분 대체할 수 있게 되었고 간단한 문법과 가독성 때문에 더 많이 사용되고 있다.

예를 들어 클래스형 컴포넌트에서 상태를 관리하던 방식은 함수형 컴포넌트에서 useState로 간단하게 구현할 수 있다.

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

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

    useEffect(() => {
        // 생명주기와 유사한 기능을 여기서 사용
    }, []);

    return <div>{count}</div>;
}

 

 

3. 함수형 컴포넌트의 장점

• 간결한 코드 : 클래스 구문 없이 함수 형태로 간단하게 작성할 수 있다.
• 리액트 개발자 권장 : 리액트는 점점 함수형 컴포넌트를 권장하고 있고, 최신 기능들도 함수형 컴포넌트에 최적화되어있다.
• Hooks를 통한 유연성 : Hook을 사용하여 상태 관리와 생명주기 관리가 훨씬 더 유연해졌다.

4. 클래스형 컴포넌트를 아직 사용하는 이유?

클래스형 컴포넌트가 여전히 사용되는 이유는 주로 이전 코드의 호환성 때문이다.

오래된 리액트 프로젝트나 라이브러리는 대부분 클래스형 컴포넌트로 작성되어 있기 때문에, 이를 함수형으로 모두 바꿔 버리는 것은 비용이 많이 들고 실용적이지 않을 있다. 따라서 클래스형 컴포넌트도 리액트에서 계속 지원되고 있다.