[React] 리액트 컴포넌트

리액트에서 컴포넌트(Component)는 앱을 구성하는 기본적인 단위로, 재사용성과 독립성을 갖춘 UI 요소입니다. 이 컴포넌트들을 조합하여 더 큰 단위의 UI를 만들고, 페이지를 구성할 수 있습니다. 컴포넌트는 각각 독립적인 기능과 스타일을 포함할 수 있어, 유지보수성과 가독성을 높이며, 리액트 애플리케이션을 유연하게 구성할 수 있습니다.

리액트 컴포넌트의 특징

1. 재사용 가능성: 컴포넌트는 독립적으로 구성되므로 여러 곳에서 재사용할 수 있습니다. 같은 컴포넌트를 다양한 곳에서 사용할 수 있어 코드의 일관성을 높이고, 반복 작업을 줄일 수 있습니다.
2. 분업 개발: 여러 개발자가 각각의 컴포넌트를 동시에 개발할 수 있습니다. 컴포넌트 단위로 작업하므로, 협업 시 서로 간섭 없이 병렬 작업이 가능합니다.
3. 상태와 생명주기 관리: 컴포넌트는 상태(state)를 가지며, 리액트는 각 컴포넌트의 상태와 생명주기(lifecycle)를 관리합니다. 이를 통해 컴포넌트가 업데이트되는 시점을 제어하여, 필요한 부분만 효율적으로 렌더링할 수 있습니다.

컴포넌트의 종류

리액트 컴포넌트는 크게 클래스형 컴포넌트와 함수형 컴포넌트로 구분됩니다. 각각의 특성과 쓰임새는 다음과 같습니다.

1. 클래스형 컴포넌트

클래스형 컴포넌트는 ES6 클래스 문법을 사용하여 정의하며, 리액트의 생명주기 메서드를 사용할 수 있습니다. 기본적으로 extends React.Component를 사용하여 리액트 컴포넌트를 생성하며, render() 메서드를 통해 화면을 출력합니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello, I'm a Class Component!</h1>;
  }
}

export default MyComponent;

특징:

• 상태(state)와 생명주기 메서드를 활용하여 복잡한 로직을 구현할 수 있습니다.
• 리액트의 초기 버전에서는 클래스형 컴포넌트를 주로 사용했으며, 초기 React.Component와 생명주기 관리로 많은 기능을 제공했습니다.

2. 함수형 컴포넌트

함수형 컴포넌트는 단순히 함수로 정의하며, Hooks 기능이 추가되면서 상태 및 생명주기 관리도 가능해졌습니다. 현재 리액트에서 권장되는 컴포넌트 유형이며, 코드가 간결하고 유지보수하기 쉽습니다.

import React from 'react';

function MyComponent() {
  return <h1>Hello, I'm a Functional Component!</h1>;
}

export default MyComponent;

특징:

• Hooks(예: useState, useEffect)를 통해 상태 관리와 생명주기 제어가 가능합니다.
• 코드가 더 간결하고 이해하기 쉬워서 최근에는 함수형 컴포넌트가 주로 사용됩니다.
• 메모리 사용과 성능 측면에서 효율적이며, 클래스형보다 가독성이 뛰어납니다.

컴포넌트의 주요 특징과 이점

• Props: 컴포넌트 간에 데이터를 전달하기 위해 사용하는 객체로, 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있습니다. 이를 통해 데이터와 UI 로직을 효율적으로 분리하고, 컴포넌트 간 협력을 도울 수 있습니다.
• 상태 관리(State): 상태는 컴포넌트 내에서 관리되는 데이터입니다. 함수형 컴포넌트에서는 useState Hook을 사용하여 상태를 관리할 수 있습니다.
• 생명주기: 컴포넌트는 생성, 업데이트, 제거 과정에서 특정 메서드(생명주기 메서드)와 Hook을 통해 그 과정들을 제어할 수 있습니다.

 

 

클래스형 컴포넌트와 함수형 컴포넌트의 비교

구분	클래스형 컴포넌트	함수형 컴포넌트
작성 방식	ES6 클래스	함수 형태
상태 관리	this.state 및 this.setState()	useState Hook
생명주기 관리	생명주기 메서드 활용	useEffect Hook
권장 여부	권장되지 않음	리액트 최신 권장 방식

요약

리액트 컴포넌트는 재사용 가능하고 독립적인 UI 요소로, 여러 개의 컴포넌트로 전체 애플리케이션을 구성합니다. 초기에는 주로 클래스형 컴포넌트가 사용되었지만, 현재는 Hooks가 추가되면서 함수형 컴포넌트를 사용해 코드를 더 간결하게 작성할 수 있습니다.