React의 4가지 개념(2) - Components

React의 4가지 개념 중 두 번째로 React의 구성 단위인 Components에 대해 알아봅시다.

우리는 지난 시간에 JSX 문법에 대해 공부하면서 App이라는 이름의 Component를 이미 만들어보았습니다. 이번 시간에는 React에서 Component를 만드는 두 가지 방법에 대해 공부해봅시다.

Function Component & Class Component

React에서 함수를 만드는 방법은 두 가지가 있습니다. 하나는 Function Component(함수 컴포넌트)이고, 하나는 Class Component(클래스 컴포넌트)입니다. 코드를 직접 치면서 이해해봅시다. 지난 시간에 작성하던 index.js파일의 App Component 위에 두 개의 Component를 추가해봅시다.

function FCHello() {
  return (
    <div>
      <h1>Hello Functional Component!</h1>
    </div>
  );
}

class CCHello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello Class Component!</h1>
      </div>
    );
  }
}

Function Component와 Class Component는 그 이름대로 “함수 형태로 만든 컴포넌트”와 “클래스 형태로 만든 컴포넌트"라는 뜻입니다.

1~7번째 줄의 FCHello 컴포넌트는 함수의 형태로 짜여진 컴포넌트입니다. 함수로 컴퍼넌트를 짤 경우, 함수를 선언하고 그 함수의 반환값(return 값)으로 React Component를 주시면 됩니다. 여기서 React Component란, 지난 시간에 배운 JSX 문법의 집합이라고 생각하시면 됩니다.

9~17번째 줄의 CCHello 컴포넌트는 클래스의 형태로 짜여진 컴포넌트입니다. 웹에서 사용되는 JavaScript만 공부하신 분들에게는 생소한 형태일 수 있는데, class 예약어는 JavaScript에서 클래스를 선언하는 예약어입니다. 객체지향프로그래밍을 할 때 자주 사용됩니다. 지금은 단지 “Class Component가 저렇게 생겼구나" 라고 생각하고 넘어가셔도 충분합니다.
Class Component의 경우 바로 return하는 것이 아니라, render함수를 호출하고 그 안에서 Component를 return 해주어야 합니다.

다른 Component에서 우리가 만든 Component 사용하기

이제 우리가 작성한 두 개의 Component를 App Component안에서 불러봅시다. Function Component와 Class Component 둘 다 호출하는 방식은 동일합니다.

import React from "react";
import ReactDom from "react-dom";

function FCHello() {
  return (
    <div>
      <h1>Hello Functional Component!</h1>
    </div>
  );
}

class CCHello extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello Class Component!</h1>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <FCHello />
        <CCHello />
      </div>
    );
  }
}

ReactDom.render(<App />, document.getElementById("root"));

그러면 다음과 같은 결과를 확인할 수 있습니다.

Fragment

추가적으로, HTML에서 의미론적 태그 (semantic tag - 의미만 있고 아무 추가적인 기능을 하지 않는 태그)로는 div가 가장 많이 사용되었습니다. JSX에서도 semantic tag같은 Component가 있는데, React.Fragment입니다. 위 코드에서 모든 <div>...</div>는 <React.Fragment>...</React.Fragment>로 바꿀 수 있습니다.

import React from "react";
import ReactDom from "react-dom";

function FCHello() {
  return (
    <React.Fragment>
      <h1>Hello Functional Component!</h1>
    </React.Fragment>
  );
}

class CCHello extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Hello Class Component!</h1>
      </React.Fragment>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <FCHello />
        <CCHello />
      </React.Fragment>
    );
  }
}

ReactDom.render(<App />, document.getElementById("root"));

또한 <React.Fragment>...</React.Fragment>는 생략이 가능하기 때문에, <>...</>이런 형태로 변경될 수도 있습니다.

Component를 만들 때의 규칙

지금까지 Component를 만드는 방법에 대해 알아보았습니다. 추가적으로 Component를 만들 때 두 가지 규칙이 있습니다.

• Component 이름은 대문자로 시작해야 합니다.
  기존의 HTML 태그는 소문자로 시작하기 때문에, React의 Component는 대문자로 시작하여 차이를 둡니다.

• Component의 return값은 가장 큰 하나의 Component로 감싸져 있어야 합니다.
  우리가 Fragment를 사용하는 가장 큰 이유입니다. 만약 아래와 같이 코드를 작성한다면, React는 에러를 낼 것입니다.

return (
    <FCHello />
    <CCHello />
)

여기까지 해서 Component의 종류와 각각의 형태로 Component를 만드는 방법, 그리고 React.Fragment에 대해 배워보았습니다. 수고하셨습니다.