[React] class(클래스형) 컴포넌트 VS. functional(함수형) 컴포넌트

React 컴포넌트 형식은 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 리액트 16.8 이전에는 함수형 컴포넌트는 간단한 동작에만 사용이 되었지만, 요즘은 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 사용하는 추세이다. 이 둘의 차이점에 대해 자세히 알아보자.

 

 

목차

1. 기본 형태
2. 비교
3. Functional(함수형) 컴포넌트와 Hooks

 

 

 

 

기본 형태

Class (클래스형) 컴포넌트

 

import React, { Component } from 'react'
 
class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        name: props.name
      };
    }
 
    render() {
        return <h1>Hello, {this.state.name}</h1>;
    }
}
 
export default Hello;

 

Functional (함수형) 컴포넌트

 

import React from 'react'
 
function Hello(props) {
    return (
        return <h1>Hello, {props.name}</h1>
    )
}
 
export default Hello;

 

또는, 화살표 함수 형태도 가능하다.

 

import React from 'react'
 
const Hello = (props) => {
    return (
        return <h1>Hello, {props.name}</h1>
    )
}
 
export default Hello;

 

 

 

 

비교

Class Component	Functional Component
- 더 많은 기능 제공 (State, Lifecycle) - 비교적 길고 복잡한 코드 - 비교적 느림	- 비교적 제한적 기능 - 제공 짧고 간결한 코드 - 비교적 성능이 좋음

 

 

 

예전에는 함수형 컴포넌트가 기능적인 부분에서 제한이 많았다. 그래서 함수형 컴포넌트를 주로 사용했었다. 함수형 컴포넌트에서만 사용이 가능한 기능은 대표적으로 Lifecycle과 State가 있다.

 

아래 도표는 리액트의 Lifecycle(생명주기)를 나타낸다. componentWillMount(), componentDidMount()등 Lifecycle에 정의된 메서드는 함수형 컴포넌트에서만 사용이 가능하다.

 

 

출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

 

함수형 컴포넌트에서는 State(상태)를 관리할 수 있지만, 함수형 컴포넌트에서는 State를 생성할 수 없다.

Functional(함수형) 컴포넌트와 Hooks

그런데 왜 요즘은 함수형 컴포넌트를 많이 사용하는 걸까? 함수형 컴포넌트에서만 가능했던 Lifecycle과 State 기능은 여러 가지 Hook으로 보완할 수 있게 되었기 때문이다.

useEffect()

useEffect Hook을 사용하면 함수형 컴포넌트에서도 Lifecycle에 따른 메서드를 사용할 수 있다.

 

 

useState()

useState Hook을 사용하면 함수형 컴포넌트에서도 State를 생성할 수 있다.

 

import React, { useState } from 'react'
 
 
const Hello = (props) => {
    const [name, setName] = useState("철수");
 
    return (
        return <h1>Hello, {name}</h1>
    )
}
 
export default Hello;