컴포넌트

클래스형 컴포넌트

컴포넌트를 선언하는 방식은 두 가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다.

 

함수형 컴포넌트

import './App.css';
  function App() {
    const name = '리액트';
    return <div className="react"> {name}</div>;
  }
export default App;

클래스형 컴포넌트

import { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div className="react">{name}</div>;
  }
}

export default App;

클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다.

클래스형 컴포넌트에는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야할 JSX를 반환해야 한다.

함수 컴포넌트는 클래스형 컴포넌트 보다 선언하기가 훨씬 편하다. 또한, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용한 것이 파일 사이즈가 작다는 장점이 있다.

state와 라이프사이클 API의 사용이 불가능하다는 단점이 있었지만, 이는 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 클래스형 컴포넌트와 완전히 똑같이 사용할 수 있는것은 아니지만 조금 다른 방식으로 비슷한 작업을 할 수 있게 되었다.

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다. 하지만 클래스형 컴포넌트의 기능은 꼭 알아 두어야 한다.

컴포넌트 생성

MyComponent.js

import React from 'react';

const MyComponent = () => {
  return <div>새로운 컴포넌트</div>;
};

export default MyComponent;

모듈 내보내기

export default MyComponent;

다른 파일에서 이 파일을 import할 때, MyComponent 클래스를 불러오도록 설정

모듈 불러오기

App.js

import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return <MyComponent />;
  }
}

export default App;