[React] React 컴포넌트(Component) 종류와 어떻게 사용하는지 알아봅시다! 🚀

React

 

 

 

 

  React에서 중요한 개념 중 하나인 컴포넌트에 대해서 알아보겠습니다.

 

 

  React를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지의 컴포넌트(Component)로 구성되어 있습니다.

 

 

  예를 들어 페이스북의 게시물 하나에 제목, 글과 사용자 정보, 이미지, 입력창, 버튼 등 모두 하나의 컴포넌트입니다. 그리고 게시물 하나에 들어가는 컴포넌트 수만해도 백가지 이상 들어간다고 합니다! 이러한 예시만 보아도 컴포넌트를 잘 만들게 되면 하나의 유기체(컴포넌트의 집합)를 구성하는데 효율적인 구조를 만들 수 있습니다.

 

 

 

 

  컴포넌트의 기능

  컴포넌트의 기능은 단순한 템플릿 이상입니다.

 

1. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 것

2. 라이프사이클(Lifecycle) API를 이용하여 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리하는 것

3. 임의 메서드를 만들어 특별한 기능을 붙여주는 것

   이러한 컴포넌트의 기능을 통해 하나의 유기체(Atomic Design 참고)가 만들어지게 되고 다양한 기능과 역할을 가진 요소가 만들어집니다.

 

  컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. React 공식문서

Components and Props – React

 

 

 

  클래스형 컴포넌트

  import React, { Component } from 'react';

  class App extends Component {
      render() {
          const name = 'react';
          return <div className="react">{name}</div>;
      }
  }

  export default App;

클래스형 컴포넌트를 사용할 경우 (1)state 기능 및 라이프사이클(Lifecycle) 기능을 사용할 수 있다는 것과 (2)임의 메서드를 정의할 수 있습니다. 클래스형 컴포넌트는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.

 

 

 

 

  함수형 컴포넌트

 

  import React from 'react';
  import './App.css';

  function App() {
      const name = '리액트';
      return <div className="react'>{name}</div>;
  }

  export default App;

 

 

  함수형 컴포넌트의 장점으로는 (1)클래스형 컴포넌트보다 선언하기가 훨씬 편합니다. (2)메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. 또한, (3)프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작습니다.(하지만 이 부분은 클래스 컴포넌트와 큰 차이가 없으므로 너무 중요하게 생각하지 않아도 됩니다.)

 

 

함수형 컴포넌트의 주요 단점은 state와 라이프사이클 API의 사용이 불가능하다는 점 입니다. 이는 React v16.8 이후 함수형 컴포넌트에 Hooks라는 개념이 도입되면서 해결되었습니다. 클래스 컴포넌트와 완전히 똑같이 사용할 수 있는 것은 아니지만 조금 다른 방식으로 비슷한 작업을 할 수 있게 되었습니다.

 

 

React 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장 하고 있습니다. 하지만 클래스형 컴포넌트가 덜 떨어지거나 사라지는 것은 아니므로 클래스형 컴포넌트의 기능은 꼭 알아두어야 합니다.