[React.js] 클래스형 컴포넌트와 함수형 컴포넌트 차이

출처(감사합니다):https://koras02.tistory.com/177

React에서 컴포넌트를 선언하는 방법은 두가지가 있다. (클래스형, 함수형)

클래스형 컴포넌트란?

현재는 사용 안하는 추세. 과거 프로젝트 migration이나 유지, 보수 시 사용 할 수 있으므로 알아두는 것이 좋습니다. class가 들어가며 Component로 상속을 받아야하며 render() 메소드가 반드시 있어야 합니다.

import React,{Component} from 'react';

class App extends Component {
   render() {
     const name = "react";
     return <div className="react">{name}</div>
   }
}

export default App;

함수형 컴포넌트와 클래스형 컴포넌트의 차이점

클래스형 컴포넌트

state, lifeCycle 관련 기능사용을 직접적으로 컨트롤 가능.
메모리 자원을 함수형 컴포넌트보다 더 사용한다.
임의 메서드를 정의할 수 있다.

함수형 컴포넌트

state, lifeCycle 관련 기능 사용이 불가능. 대신 Hook 사용.
메모리 자원을 클래스형보다 덜 사용.
컴포넌트 선언이 좀 더 편함.
state 사용시에도 차이점이 있다.

클래스형 컴포넌트의 경우 아래와 같이 constructor 안에서 this.state 초기값을 설정해야 하지만

constructor(props) {
   super(props);

   this.state  = {
     array: [],
     userInput: "",
   };
}

함수형 컴포넌트는 constructor 없이 바로 state 초기값을 설정할 수 있다.

class Monsters extendes Component {
   state = {
     array: [],
     userInput: "",
   }
}

클래스형 컴포넌트에서 state는 객체 형식이며

this.state = { array: [], userInput: "", };

state값을 변경하려면 setState 함수 사용해야 한다.

onClick = {() => {
   this.setState({number: number + 1});
}}

함수형 컴포넌트에서 useState 함수로 state 사용.
useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태를 나타낸다.
두번째 원소는 상태를 바꿔주는 함수를 보통 set~~~의 형태로 설정한다.

const [message, setMessage] = useState('');