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

miin·2021년 12월 14일
0

React

목록 보기
30/55
post-thumbnail

선언 방식

클래스형

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}

0개의 댓글