클래스형 component와 함수형 component

🎁컴포넌트(Component) 

컴포넌트는 우선 불록이고 함수입니다

컴포넌트 = 화면을 구성하는 하나의 단위

 

레고 블록을 코드로 만들면

// App 컴포넌트

function App (){
return <div></div>
}

 

리액트 세계에서 말하는 컴포넌트는 함수
컴포넌트를 만들라고 한다면 우리는 html을 return 하는 함수를 만들면된다

 

👉 리액트에서 컴포넌트는 클래스형 Component와 함수형 Component가 있으며 둘의 차이점은 상태값과 Life Cycle의 유무에 따라 다릅니다. 💥 하지만 리액트 버전 16.8부터는 훅(Hook)에 의해 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성할 수 있게 되었습니다.

 

📌클래스형 Component 

 

🟥 클래스형 컴포넌트는 상태값을 가질 수 있으며 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있습니다.특징은

👉 class 키워드로 시작한다

👉 Component로 상속받는다

👉 render() 함수를 사용하여 JSX로 반환한다

👉 props를 조회할때는 this 키워드를 사용한다

import React, { Component } from 'react';

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

export default Hello;

🟥 defaultProps 설정시에는 클래스 내부에 static 키워드와 함께 선언해야합니다.

import React, { Component } from 'react';

class Hello extends Component {
  // defaultProps 첫번째 설정 방법
  static defaultProps = {
    name: '이름없음'
  };
  
  render() {
    // ...
    );
  }

  // defaultProps 두번째 설정 방법
Hello.defaultProps = {
  name: '이름없음'
};
}

export default Hello;