react class형, function형 차이

클래스형 컴포넌트

react 컴포넌트 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트]
현재 자주 사용하지 않지만, 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다.

 

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

1) 선언방식

함수형 컴포넌트

import React from 'react';
import './App.css';

function App() {

  return 
  <div>
  
  </div>
}

export default App;

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {

    return 
    <div>
    
    </div>
  }
}

export default App;

클래스 컴포넌트 핵심

1. class 키워드 필요

2. Component로 상속을 받아야한다.

3. render() 메소드가 반드시 있어야한다.

 

2) 일반적 차이

클래스형 :

• state, lifeCycle 관련 기능사용 가능하다.
• 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
• 임의 메서드를 정의할 수 있다.

함수형 :

• state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
• 메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
• 컴포넌트 선언이 편하다.

함수형이 클래스보다 후에 나왔기 때문에 더 편한 것은 사실이다. 그러나 과거 클래스 컴포넌트 사용한 프로젝트가 있다. 유지보수를 위해서 알아둘 필요가 있다.

 

3) 기능 : state 사용 차이

state

• 컴포넌트 내부에서 바뀔 수 있는 값

클래스 형

constructor 안에서 this.state 초기 값 설정 가능

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

클래스형 컴포넌트의 state는 객체 형식

this.setState 함수로 state의 값을 변경할 수 있다.

 

함수 형

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

  const [number, setNumber] = useState();