[React] Class VS Function

Class VS Function?

리액트에서는 코딩 시 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년에 접어들면서 함수형 컴포넌트에 리액트 훅(Hook)을 지원해주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.

Class 컴포넌트

• Component를 상속받은 클래스를 이용하여 컴포넌트를 정의한 것.
• state , lifeCycle 관련 기능 사용 가능.
• 메모리 자원을 함수형 컴포넌트보다 조금 더 사용함.
• 임의 메서드를 정의할 수 있음.

import React, { Component } from 'react';

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

export default App;

Function 컴포넌트

• 순수 자바스크립트 함수를 이용하여 컴포넌트를 정의한 것.
• state , lifeCycle 관련 기능 사용불가능. (단, React Hook을 통해 해결할 수 있음.)
• 메모리 자원을 함수형 컴포넌트보다 덜 사용함.
• 컴포넌트 선언 코드가 간결해져서 더욱 편함.

import React from 'react';

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

export default App;

---

리액트 훅? (React hook)

리액트 훅은 v16.8에 새로 도입되었으며, 함수형 컴포넌트에서 기존에 라이프사이클 메서드가 없어서 사용할 수 없었던 기능들을 사용할 수 있게 만들어 주었다.

훅을 도입한 이유?

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠다.
2. 복잡한 컴포넌트들은 이해하기 어렵다.
3. Class는 사람과 기계를 혼동시킨다. 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는데 큰 진입장벽이였다. JS에서 어떻게 this가 작동하는지 알아야만하고, 대부분의 다른 언어와는 다르게 작동한다.
   
   

리액트 훅 정복하기 >
리액트 훅 공식문서 >
리액트 기술용어 문서 >