[React] 03. React 컴포넌트

# 컴포넌트(Component)

리액트에서 컴포넌트를 선언하는 방법은 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 존재합니다.

먼저, 함수형으로 컴포넌트를 선언하는 방법에 대해 알아봅시다.

function App() {
  return (
    <>
      <h1>안녕하세요!</h1>
      <h2>우든이 블로그입니다.</h2>
    </>
  );
}

 

또는 다음과 같이 화살표 함수로 컴포넌트를 선언할 수 있습니다.

const App = () => {
  return (
    <>
      <h1>안녕하세요!</h1>
      <h2>우든이 블로그입니다.</h2>
    </>
  );
}

함수형 컴포넌트를 사용하면 클래스형 컴포넌트를 사용하는 것보다 선언이 간편하고 메모리 낭비가 적지만, state와 라이프사이클 기능 사용이 불가능하다는 단점이 존재합니다. 하지만 이런 단점도 Hooks라는 기능이 도입되면서 해결되었습니다.

 

리액트 공식문서에서는 함수형 컴포넌트와 Hooks을 사용하기를 권장한다고 해요!

 

다음은 클래스형 컴포넌트를 선언하는 방법입니다.

import React, {Component} from 'react';

 

또한, 클래스형 컴포넌트에는 render()가 필요합니다.

클래스형 컴포넌트를 사용하면 state와 라이프사이클을 사용할 수 있고, 임의의 메서드를 정의할 수 있습니다.

class App extends Component {

    render(){
        return(
            <>
            <h1>안녕하세요!</h1>
            <h2>우든이 블로그입니다.</h2>
            </>
        );
    }
}