컴포넌트

시작하기에 앞서

주의

해당 블로그의 모든 문서는 학습한 내용을 제 방식으로 정리하여 작성하고 있습니다.
순수 창작물도 아니고, 틀린 내용이 있을 수 있으므로 참고하고 읽어주시면 감사하겠습니다.

클래스 컴포넌트

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <div>Hello World!</div>;
  }
}

리액트에서 컴포넌트를 만드는 방법은 클래스 컴포넌트와 함수형 컴포넌트 두 가지가 있습니다.

먼저 클래스 컴포넌트를 만드는 방법을 알아보겠습니다.

가장 먼저 React, { Coponent } ... 부분을 import 해줘야 합니다.

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <div>Hello World!</div>;
  }
}

그 후에 App 클래스를 선언하고 import한 Component 클래스를 상속받도록 해줍니다.

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return <div>Hello World!</div>;
  }
}

마지막으로 render() { return ... }안에서 jSX 문법으로 UI를 작성하면 됩니다.

함수형 컴포넌트

function App() {
  return <div>Hello World!</div>;
}

export default App;

함수형 컴포넌트는 간단합니다. 무언가를 따로 import 해줄 필요도 없고,

클래스 컴포넌트처럼 render() { return ... }부분도 필요 없습니다.

return 뒤에 JSX 문법으로 UI를 작성하면 됩니다.

대신 5번 라인처럼 export default를 해줘야 정상적으로 동작합니다.