[React / ts] 클래스형 컴포넌트와 함수형 컴포넌트

리액트에서는 기능별로 다른 파일에 컴포넌트를 작성 후, 한 파일에서 합칠 수 있다.

만약 한 파일에 모든 컴포넌트를 작성하고 기능을 작성한다면 매우 지저분해지고 유지보수가 힘들 것이다.

리액트에서 컴포넌트를 작성하는 방법에는 두 가지가 있다.

 

클래스형 컴포넌트

import { Component } from "react";

class ClassCom extends Component {
  render() {
    return <div>클래스형 컴포넌트</div>;
  }
}

export default ClassCom;

class "클래스명" extends Component

주의사항으로 클래스는 Component를 extends해야 하고,

render()를 호출한 뒤 그 안에 return문을 작성해야 정상적으로 빌드가 된다.

 

함수형 컴포넌트

function FuncCom() {
  return <div>함수형 컴포넌트</div>;
}

export default FuncCom;

function "함수명"

클래스형과 다르게 매우 간단하게 작성이 가능하다.

Component를 extend할 필요도 없고 render()를 호출할 필요도 없다.

이러한 이유 때문에, 실제로 컴포넌트를 작성할 때는 함수형 컴포넌트를 주로 사용한다.

 

import "./App.css";
import ClassCom from "./ClassCom";
import FuncCom from "./FuncCom";

// 주석문

function App() {
  return (
    <div className="App-header">
      <ClassCom />
      <FuncCom />
    </div>
  );
}

export default App;

컴포넌트를 구현했다면, 다른 파일에서 해당 경로의 클래스 또는 함수를 import하여 사용할 수 있게 된다.