[React] Class Component와 Function Component

질문 : Class Component와 Function Component의 차이점이 무엇인가요?

질문의 요지 : 컴포넌트 선언하는 두 가지 방식을 모두 알고 있는가? 클래스 컴포넌트를 유지 보수하는데 사용할 수 있는가?

크루답변
Class Componet는 Function Component가 생기기 이전에 존재하던 컴포넌트 형식입니다. Class Component는 Function Component와 달리 컴포넌트를 확장해서 써야만 했습니다. 그러나 Function Component는 순수 함수이기 때문에 이러한 확장 과정을 거치지 않고도 컴포넌트를 만들 수 있습니다. 또한 Class Component는 React 수명 주기 메서드(ex. componentDidMount)를 사용해 React Life Cycle을 세밀하게 조작할 수 있고, Function Component는 React 수명 주기 메서드는 사용할 수 없는 대신 React Hook을 사용하여 상태 값을 사용하거나 최적화할 수 있는 기능들을 보완했습니다.

내답변
우선 Class Component와 Function Component의 역할은 동일합니다. 차이점이 있다면 클래스 컴포넌트의 경우 state 및 라이프사이클 기능을 사용할 수 있다는 것입니다. 한편 함수형 컴포넌트는 선언하기가 좀 더 편하고 메모리 자원을 덜 사용하는 장점이 있다. 과거에는 state 및 라이프사이클 기능을 사용할 수 없다는 단점이 있었는데 이어한 단점은 리액트 훅(useState, useEffect)이 도입되면서 해결되었다.

Component란?

단순히 템플릿 이상의 기능을 수해안다.
데이터가 주어졌을때 이에 맞춰 UI를 만들어주는

Class Component란?

1) 선언방식

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

export default App;

2) 차이점

• 더 많은 기능, 더 긴 코드, 복잡한 코드, 더딘 성능
• 상태 값 : o
• Life Cycle : o

Function Component란?

1) 선언방식

import React from 'react';

function App() {
  const name = '리액트';
  return <div>{name}</div>;
}

export default App;

2) 차이점

• 더 적은 기능, 짧은 코드, 심플한 코드, 빠른 성능
• 상태 값 : x
• Life Cycle : x

3) 리액트 훅 등장 이후로?

• 상태 값 : o => useState
• Life Cycle : o => useEffect

요즘 추세?

요즘은 함수형 컴포넌트+HOOK을 사용하는 추세이다.
클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 복잡함