클래스형 컴포넌트

<aside> 👉🏿 클래스형 컴포넌트란?

클래스형 컴포넌트는 아래 코드와 같은 구조로 생겼다.

기본적으로 함수형 컴포넌트와 역할은 동일하다.

차이점은 나중에 배울 state 기능 및 LifeCycle 기능을 사용할 수 없다는 점이다.

</aside>

import React, { Component } from 'react';

class Class extends Component {
  render() {
    return (
      <div>
        안녕하세요
      </div>
    );
  }
}

export default Class;

<aside> 👉🏿 어떤 상황에 함수형 혹은 클래스형 컴포넌트를 써야할까?

리액트 공식 문서에서는 함수형 컴포넌트와 Hooks의 사용을 권장하고 있고,

Hook을 사용 시 state와 LifeCycle도 어느정도 구현이 가능하다.

따라서 대부분 함수형 컴포넌트를 사용하겠지만 그렇다고 클래스형 컴포넌트를 모르면 안된다.

</aside>

모듈 내보내기 및 불러오기

<aside> 👉🏿 컴포넌트를 생성하고 다른 파일에서 import해오는 방법이다.

컴포넌트에서는 export를 해주고 가져올때는 import를 해준다.

</aside>

//MyComponent.js
export default MyComponent

//App.js
import MyComponents from "./MyComponents";