클래스형 컴포넌트

클래스형 컴포너트의 설명에 앞서 컴포넌트를 선언하는 방식은 두 가지입니다.

1. 함수형 컴포넌트
2. 클래스형 컴포넌트

클래스형과 함수형 컴포넌트의 차이점

1. 클래스형 컴포넌트

- state 기능 및 라이프사이클 기능을 사용할 수 있다
- 임의 메서드를 정의할 수 있다
- render 함수가 꼭 있어야 한다
- 그 안에서 보여 주어야 할 JSX를 반환해야 한다

2_1. 함수형 컴포넌트의 장점

- 클래스형 컴포넌트보다 선언하기가 훨씬 편하다
- 메모리 자원을 덜 사용한다
- 완성한 프로젝트를 빌드한 후 배포할 때의 결과물의 파일크기가 작다

2_2. 함수형 컴포넌트의 단점

- state와 라이프사이클 API 사용이 불가능(리액트 v16.8 이후 Hooks라는 기능이 도입되면서 해결됨)

App.js (클래스형 컴포넌트의 기본구조)

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}
 
export default App;

MyComponent.js (클래스형 컴포넌트의 기본구조 (ES6버전)

import React from 'react';
 
const MyComponent = () => {
  return <div>나의 새롭고 멋진 컴포넌트</div>;
};
 
export default MyComponent;

모듈 내보내기 및 불러오기

모듈 내보내기(export)

export default MyComponent;

위 코드는 다른 파일에서 이 파일을 import할 때,
위에서 선언한 MyComponent 클래스를 불러오도록 설정합니다.

모듈 불러오기(import)

import MyComponent from './MyComponent';

위 코드는 MyComponent 컴포넌트를 불러옵니다.

컴포넌트 생성