[React] 되돌아보기 - 클래스형 컴포넌트와 함수형 컴포넌트의 차이

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

💡 클래스형 컴포넌트란?

react에서 컴포넌트를 선언하는 방법은 두가지가 있다. (클래스형, 함수형)
현재 점점 더 사용안하는 추세이나 과거 프로젝트 유지보수시 사용 가능성 있음.

• 클래스형 컴포넌트의 핵심

1. class라는 키워드가 들어가며 Component로 상속을 받아야함.
2. render() 메소드가 반드시 있어야함.

ex)

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  = {
     monsters: [],
     userInput: "",
   };
}

• constructor 없이 바로 state 초기값을 설정할 수 있다.

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

• 클래스형 컴포넌트에서 state는 객체 형식!

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

state값을 변경하려면 setState 함수 사용!

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

함수형:

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

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

출처:

https://koras02.tistory.com/177

[Koras02코딩웹:티스토리]