React Component

1. 개요

React는 두 가지의 컴퍼넌트 선언방식이 있습니다. 하나는 함수형 컴퍼넌트고, 다른 하나는 클래스형 컴퍼넌트입니다.

 

2. 컴퍼넌트

2.1. 함수형 컴퍼넌트

함수형 컴퍼넌트는 아래와 같은 형태를 합니다.

import React from "react";

const FunctionalComponent = (props) => {
  const {description} = props;

  return <div>Functional Component: {description}</div>
};

export default FunctionalComponent;

간단한 형태를 하고, 라이프사이클 기능을 사용하지 않아도 될 때 사용하기 좋습니다.

Hooks이 생기면서 함수형 컴퍼넌트에서도 state를 사용할 수 있도록 되었습니다.

2.2. 클래스형 컴퍼넌트

클래스형 컴퍼넌트는 아래와 같은 형태를 합니다.

import React from "react";

class ClassComponent extends React.Component {
  render() {
    const {description} = this.props;

    return (
      <div>Class Component: {description}</div>
    );
  }
}

export default ClassComponent;

클래스형 컴퍼넌트는 라이프사이클 기능을 사용할 수 있고, 함수형 컴퍼넌트보다 복잡한 컴퍼넌트를 만들어야할 때 사용하기 좋습니다.

3. 컴퍼넌트 사용하기

컴퍼넌트를 사용하는 방법은 함수형 컴퍼넌트나 클래스형 컴퍼넌트 모두 동일합니다.

import React from 'react';
import FunctionalComponent from "./FunctionalComponent";
import ClassComponent from "./ClassComponent";
import './App.css';

const App = () => {
  return (
    <React.Fragment>
      <div>Hello react!</div>
      <FunctionalComponent
        description="this is functional component!"
      />
      <ClassComponent
        description="this is class component!"
      />
    </React.Fragment>
  )
};

export default App;

사용할 컴퍼넌트를 import 하고 컴퍼넌트를 선언할 때 prop을 전달합니다.

prop은 변수나 함수 등을 전달할 수 있습니다.

 

이번 글에서 props, state, lifecycle, hooks라는 용어가 등장했는데, 이에 대해서는 뒤에서 더 설명하도록 하겠습니다.