Class Component vs Functional Component

Functional Component

import React from 'react';

function App() {
  return <h1>Hello, World!</h1>;
}

• 함수형 컴포넌트는 기본적으로 클래스형 컴포넌트의 render함수이다.
• Props에 접근하고 사용할 수 있지만, state를 가질 수는 없다. → [Hook을 통해 해결 ]
• lifecycle method를 사용할 수 없다. 따라서 UI에 집중하게 되고 app의 행동에는 크게 관여하지 않는다.
• this 키워드를 사용할 수 없다.
• 메모리 자원을 함수 컴포넌트보다 덜 사용한다.
• 컴포넌트 선언이 편하다.

 

Class Component

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

• 클래스형 함수는 ES6문법을 사용할 수 있다.
• 따라서 componentWillMount 혹은 componentDidMount와 같은lifecycle 메소드를 사용할 수 있다.
• class components는 React.Component에서 확장된다.
• props와 state 모두를 가지고 사용할 수 있으며, this 키워드를 사용해서 그들과 해당 컴포넌트 내에서 선언한 함수에 접근할 수 있다.

 

---

 

Class Component 안 쓰는 이유

클래스 컴포넌트는 props를 재사용하기 때문에 개발자의 예상과 다르게 동작할 수 있는 문제점이 존재한다. 따라서 별도의 예방 작업을 해 주어야 하지만 함수형 컴포넌트는 이러한 문제점이 발생하지 않는다.

이 외에도 함수형 컴포넌트는 클래스 컴포넌트에 비해 성능과 가독성이 좋고 테스트 하기 쉽다. 또한 말그대로 함수형 컴포넌트이기에 함수형 프로그래밍의 장점을 활용하기에도 유리합니다.

 

Functional Component 쓰는 이유

React 16.8 버전부터 함수형 컴포넌트에서 state와 라이프사이클을 사용할 수 있는 Hook이라는 개념이 등장했다. 때문에 기존에 동일시 되었던 Stateless Component와 Functional Component는 개념적으로 분리가 되었다고 볼 수 있다. React Hooks 는 점진적으로 클래스컴포넌트에서만 존재하는 기능들을 옮겨올예정이라고 한다.

 

---

[참고]

https://boxfoxs.tistory.com/395