클래스형과 함수형의 차이_React

선언 방식

클래스형

import React, {Component} from 'react';

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

export default App;

• class 키워드 필요
• component로 상속 받아야함

App extends Component 

• render() 메소드가 반드시 있어야함

함수형

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

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

일반적 차이

클래스형

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

함수형

• state와 lifeCycle 관련 기능사용은 불가하고 Hooks를 사용할 수 있다
• 메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
• 컴포넌트 선언이 편하다.

기능

State

클래스형

• constructor 안에서 this.state 초기 값 설정
• 객체형식
• this.setState 함수로 state의 값을 변경할 수 있다

함수형

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

Props

클래스형

• this.props로 통해 값을 불러올 수 있다

const {name, num, child} = this.props;

• 부모 객체의 키 값, 자식 props 활용

함수형

• props를 불러올 필요 없이 바로 호출 할 수 있다

const Mynum = ({ name, num }) => {}

이벤트 핸들링

클래스형

• 함수 선언시 에로우 화살로 바로 선언 가능하다
• 요소에서 적용하기 위해서는 this를 붙여야한다

handleChange = e => {
  this.setState({
    message: e.targe.value
  });
}

onChange = {this.handleChange}

함수형

• const 키워드 + 함수 형태로 선언 해야한다
• 요소에서 적용하기 위해서는 this가 필요없다

const onClick = () => {
  alert(message);
};

onClick = {onClick}