[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

리액트에서 컴포넌트를 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 두 컴포넌트의 장단점을 각각 살펴보자.

 

1, 클래스형 컴포넌트

- class 키워드로 시작

- component로 상속 받음

- render 함수를 사용해서 JSX를 반환

- props를 조회할 때 this키워드를 사용

 

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

 

☑️ 클래스형 컴포넌트는 생명주기 메서드를 가지며 이 메서드를 오버라이딩 하여 특정 시점에 코드가 실행되도록 만든다

 

2023.04.30 - [React.js] - [React] 리액트의 생명주기(Life Cycle)

[React] 리액트의 생명주기(Life Cycle)

2. 함수형 컴포넌트

- JSX를 return문을 사용해서 반환

- state를 사용할 수 없다

- 생명 주기 함수를 작성할 수 없다.

 

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

export default Hello;

 

☑️ 함수형 컴포넌트에서는 Hook을 이용해 생명주기에 원하는 동작을 조작합니다.

 

2023.04.30 - [React.js] - [React] React Hooks

[React] React Hooks

 

 

❔ 함수형 컴포넌트를 선호하는 이유

요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트 + Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 갖고 있는 반면, 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트가 더 자주 쓰인다.