icon안동민 개발노트

컴포넌트의 개념과 종류 (함수형, 클래스형)

 React 애플리케이션은 컴포넌트들로 구성됩니다.

 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각으로, 자체적인 구조, 로직, 그리고 스타일을 가질 수 있습니다.

컴포넌트의 개념과 역할

 컴포넌트는 다음과 같은 역할을 합니다.

  1. UI 구조화 : 복잡한 UI를 작은 단위로 나누어 관리합니다.
  2. 재사용성 : 동일한 구조를 여러 곳에서 재사용할 수 있습니다.
  3. 유지보수성 : 개별 컴포넌트 단위로 수정과 테스트가 가능합니다.
  4. 추상화 : 복잡한 UI 로직을 캡슐화하여 사용을 단순화합니다.

 React에서 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트.

함수형 컴포넌트

 함수형 컴포넌트는 JavaScript 함수를 사용하여 정의됩니다.

 이는 가장 간단한 형태의 React 컴포넌트입니다.

 예제

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 특징

  • 간결하고 이해하기 쉬운 문법
  • 상태(state)를 사용할 수 없었으나, React 16.8 이후 Hooks의 도입으로 가능해짐
  • 성능 최적화가 용이함
  • 테스트하기 쉬움

클래스형 컴포넌트

 클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의됩니다.

 예제

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

 특징

  • 더 많은 기능 제공 (예 : 생명주기 메서드)
  • 상태(state) 관리 가능
  • 더 복잡한 문법
  • this 키워드 사용으로 인한 혼란 가능성

함수형 vs 클래스형 컴포넌트

 최근 React 개발의 트렌드는 함수형 컴포넌트를 선호하는 방향으로 이동하고 있습니다. 이는 다음과 같은 이유 때문입니다.

  1. Hooks의 도입 : React 16.8에서 도입된 Hooks를 통해 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 되었습니다.
  2. 간결성 : 함수형 컴포넌트는 더 짧고 읽기 쉬운 코드를 작성할 수 있게 해줍니다.
  3. 성능* : 일반적으로 함수형 컴포넌트가 더 좋은 성능을 보입니다.
  4. 테스트 용이성 : 순수 함수로 작성된 컴포넌트는 테스트하기 더 쉽습니다.

 그러나 클래스형 컴포넌트가 완전히 사라진 것은 아닙니다. 다음과 같은 경우에는 여전히 클래스형 컴포넌트를 사용할 수 있습니다.

  • 레거시 코드베이스 유지보수
  • 특정 생명주기 메서드에 의존하는 로직이 있는 경우
  • 에러 경계(Error Boundaries) 구현 시 (현재 함수형 컴포넌트에서는 지원되지 않음)

컴포넌트 비교 예제

 다음은 같은 기능을 하는 함수형 컴포넌트와 클래스형 컴포넌트의 예입니다.

 함수형 컴포넌트

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 클래스형 컴포넌트

import React from 'react';
 
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

 이 예제에서 볼 수 있듯이, 함수형 컴포넌트는 useState Hook을 사용하여 더 간결하게 상태를 관리할 수 있습니다.

 반면 클래스형 컴포넌트는 this.state와 this.setState를 사용하여 상태를 관리합니다.

최근 트렌드

 React 개발의 최근 트렌드는 다음과 같습니다.

  1. 함수형 컴포넌트 선호 : Hooks의 도입으로 함수형 컴포넌트 사용이 크게 증가했습니다.
  2. Hooks 사용 확대 : useState, useEffect, useContext 등 다양한 Hooks를 활용한 개발이 일반화되고 있습니다.
  3. 상태 관리 라이브러리의 변화 : Redux, MobX 등 기존 라이브러리와 함께 Recoil, Jotai 같은 새로운 상태 관리 솔루션도 등장하고 있습니다.
  4. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) : Next.js, Gatsby 등을 활용한 SSR과 SSG 기술의 사용이 증가하고 있습니다.

 결론적으로, React 컴포넌트는 UI를 구조화하고 재사용 가능한 단위로 만드는 핵심 개념입니다.

 함수형 컴포넌트와 Hooks의 사용이 증가하는 추세이지만, 클래스형 컴포넌트도 여전히 유효한 선택지입니다.

 개발자는 프로젝트의 요구사항과 팀의 선호도에 따라 적절한 컴포넌트 유형을 선택할 수 있습니다.

 중요한 것은 컴포넌트의 개념을 잘 이해하고, 재사용 가능하고 유지보수가 용이한 코드를 작성하는 것입니다.

이전으로다음으로