React: Class component VS Function component

class or function components의 목적은 HTML을 생성해서 유저에게 보여주는 것.(JSX를 사용), 그리고 유저로부터의 피드백을 handling하는 것 (Event Handeler 사용)

Class Components를 사용할때 좋은점

1. 쉽게 정리하고, 한눈에 알아보기 좋다. (helper function을 사용할때도 하나의 class component안에 다 작성할 수 있어 한눈에 알아보기가 쉽다.)
2. 'state'를 쓸 수 있어서 user input을 처리하기에 좋다.
3. lifecycle events를 사용할 수 있다.

Class Components 사용규칙

1. Javascript class여야한다.
2. React.Component로 extend 되어야 한다.
3. JSX를 return하는 'render'을 define 해야한다.

Function Components

함수이기때문에 class components를 쓸때와는 다르게 매번 this나 bind를 쓰지 않아도 돼서 코드가 줄어들고 간편하다.
이전에는 function components는 그저 유저에게 JSX를 보여주는 것밖에 할 수 없었지만, HOOKs system이 도입된 후로는 class component와 거의 비슷하게 기능을 수행할 수 있다.
HOOKs를 사용하여 lifecycle과 마찬가지로 특정한 포인트에 코드를 실행할 수 있고, state system에도 접근할 수 있게 되었다.

-> 그럼 둘 중에 어떤걸 사용해야하는가?
: 몇년전부터 하던 리액트 기반 프로젝트를 계속해서 유지하는 회사의 경우에는 Class-based components를 사용하는 경우가 많고, 최근에는 function components를 더 많이 쓰는 추세이다.

Function component 를 Class component로 바꿔보자.

//function component
const UserForm = () => {
  return (
    <form>
      	<label>Enter a username: </label>
	<input />
    </form>
  );
}

ReactDom.render(<UserForm />, document.querySelector('#root'));

//Class component
class UserForm extends React.Component {
  render() {
	return (
	  <form>
	    <label>Enter a username: </label>
	      <input />
	  </form>
	);	
  }
}

ReactDom.render(<UserForm />, document.querySelector('#root'));

class component에서는 render가 필수로 들어가고,
function component에서는 ES6 arrow function이 들어간다.