[kmhdev] 클래스 컴포넌트 ? 함수형 컴포넌트 ?

* 함수형 컴포넌트

함수형 컴포넌트는 아래 소스와 같이 함수형태로 컴포넌트를 구현하는것입니다.

흔히 사용하는 es6의 화살표 함수를 이용해서 구현이 가능하죠. 

저는 그럼 함수형 컴포넌트를 도대체 왜 쓰는거지? 왜 클래스 컴포넌트랑 함수형으로 구분을 해서 나눈거지라는 의문이 들어 찾아봤습니다.

 

2019년 함수형 컴포넌트는  개편되어 클래스형 컴포넌트보다 첫 마운팅 시점이 5~10%정도까직 상승 되었다하며

또한 기존 클래스 컴포넌트보다 코드가 짧으며 후에 유지보수를 할떄 가독성이 매우 좋아졌습니다.

 

 

과거에는 컴포넌트 state를 사용하기위해 함수형 컴포넌트를 -> 클래스 컴포넌트로 변환하는 작업을 많이 했엇지만\

최근에는 hook라는것이 등장하여 함수형 컴포넌트에서도 state를  사용할 수 있게되었습니다.

 

hook와 라이프사이클은 추후에 정리하여 올리겠습니다. 

 

Mounting(생성) : 컴포넌트가 새롭게 생성되는 시점정도로 이해

import React from 'react';

function App() {
  const title = 'hello KMH!';
  return <div>{title}</div>;
}

export default App;

* 클래스 컴포넌트

사실 클래스 컴포넌트가 함수형 컴포넌트 보다 좋은점은 오래되어서 에러가 날 확률이 적거나 문제가 생겼을때 빠르게 정보를 흭득할 수 있는 정도입니다.

 

함수형 컴포넌트가 클래스 컴포넌트보다 늦게 나왔기 때문에 함수형 컴포넌트가 더 좋습니다...

 

클래스 컴포넌트는 반드시 render() 함수를 이용해야합니다

또한 return은 반드시 <div>로 묶여야합니다.

import React, { Component } from 'react';

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

export default App;