본캠프 16일차 - Class Component vs Functional Component

  클래스형 컴포넌트  

클래스형 컴포넌트는 React 컴포넌트를 선언하는 두가지 방식 중 하나로 현재는 함수형으로 변환되고 있지만, 아직 클래스형 컴포넌트를 사용하는 기업이 있기때문에 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다.

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

선언 방식

함수형 컴포넌트

import React from 'react';

export default function Fnccomponent() {
    return <div>테스트</div>
}

클래스형 컴포넌트

import React, { Component } from 'react';

class qqq extends Component {
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

qqq.defaultProps = {
  name: '테스트'
};

export default qqq;

클래스 컴포넌트 핵심

class 키워드 필요

Component로 상속을 받아야한다.

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

일반적 차이

클래스형 

state, lifeCycle 관련 기능을 사용 가능

메모리 자원을 함수형 컴포넌트보다 조금 더 사용

임의 메서드를 정의할 수 있음

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

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

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

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

함수형 

state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]

메모리 자원을 소모가 함수형 컴포넌트보다 덜함.

선언식 자체가 간단하여 편함

함수형 컴포넌트에서는 useState 함수로 state를 사용함

useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태

두 번째 원소는 상태를 바꾸어 주는 함수

 

Props의 차이

클래스 컴포넌트

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

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

함수형 컴포넌트

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

이벤트 핸들링

클래스형 컴포넌트

함수 선언시  화살표로 바로 선언 가능

요소에서 적용하기 위해서는 this를 붙여야 함

함수형 컴포넌트

const 키워드 + 함수 형태로 선언 해야함

요소에서 적용하기 위해서는 this가 필요없음