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

리액트에서 컴포넌트를 선언하는 방식은 두가지가 있습니다. 

첫번째는 함수형 컴포넌트 이고, 두번째는 클래스형 컴포넌트 입니다.

함수형 컴포넌트의 형태는

function App() {

  const test = "";

  return <div>{test}</div>

}

  

 위와 같고

클래스형 컴포넌트의 형태는 아래와 같습니다. 

class App extends Component {

  render(){

    const test = "";

    return <div>{test}</div>;

  }

}

언뜻 보기에는 둘 사이에는 큰 차이가 없어 보이지만 둘 사이에는 특징 및 몇가지 장단점이 존재하는데 다음과 같습니다.

함수형 컴포넌트

---

- 클래스형 컴포넌트에 비해 선언하기가 편하다.

- 메모리 자원을 클래스형 컴포넌트에 비해서 덜 차지한다.

- 빌드 후 배포시에 결과물의 크기가 작다.

클래스형 컴포넌트 

---

- render 함수가 반드시 존재해야 한다.

- state 의 사용이 가능하다.

- 라이프 사이클 API의 사용이 가능하다.

둘의 장단점을 나열해 보면 위와 같지만 사실상의 크기와 성능명에서 함수형과 클래스형의 차이는 그리 크지 않고, 함수형 컴포넌트에서 지원하지 않는 기능 또한 React 의

버전 업데이트 이후 Hooks라는 기능을 통해 가능해지게 되었습니다.

따라서 둘의 사용은 사용자의 선택에 의해 결정된다고 보는것이 더 크고, 공식 메뉴얼에서는 함수형 컴포넌트 + Hooks 를 통해 컴포넌트를 작성하는 것을 권장하지만 모든 코드를 알기위해서는 클래스형 컴포넌트를 알아두는것을 추천드립니다.