5. React의 기본 개념 - 3

컴포넌트(Component)의 개념과 사용법

컴포넌트(Component)란?

React에서 컴포넌트는 UI를 구성하는 독립적인 모듈이며, 재사용 가능한 빌딩 블록입니다. 각각의 컴포넌트는 자체적인 상태(state)와 생명주기(lifecycle)를 가지며, UI의 일부분을 렌더링하는 역할을 합니다. React 애플리케이션은 여러 개의 컴포넌트로 구성되어 있으며, 이들이 결합되어 전체 UI를 형성합니다.

컴포넌트의 사용법

함수형 컴포넌트(Functional Component)

함수형 컴포넌트는 함수로 정의되며, 주로 stateless 컴포넌트로 사용됩니다. 최근 React에서는 함수형 컴포넌트를 선호하는 추세이며, React Hooks를 사용하여 상태 관리 등의 기능을 함수형 컴포넌트에서도 사용할 수 있습니다.

import React from 'react';

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

export default MyComponent;

클래스형 컴포넌트(Class Component)

클래스형 컴포넌트는 ES6의 class 문법을 사용하여 정의됩니다. 이전에는 주로 클래스형 컴포넌트가 사용되었으나, 최근에는 함수형 컴포넌트와 React Hooks가 주류가 되면서 사용빈도가 줄어들고 있습니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

JSX(JavaScript XML)

JSX는 JavaScript의 확장 문법으로, XML과 유사한 문법을 사용하여 컴포넌트의 UI를 정의합니다. JSX를 사용하면 가독성이 좋고, 컴포넌트의 구조를 쉽게 파악할 수 있습니다.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a JSX example.</p>
    </div>
  );
};

export default MyComponent;

컴포넌트의 장점

• 재사용성: 컴포넌트는 독립적이고 모듈화되어 있어 다른 곳에서 쉽게 재사용할 수 있습니다.
• 유지보수성: 각각의 컴포넌트는 자체적인 책임을 갖고 있기 때문에 코드의 가독성과 유지보수성이 향상됩니다.
• 효율성: React의 가상 DOM(Virtual DOM)을 통해 변경된 부분만을 업데이트하므로 성능이 향상됩니다.

예제 코드

// 함수형 컴포넌트 예제
import React from 'react';

const MyFunctionalComponent = () => {
  return <div>Hello, Functional Component!</div>;
};

export default MyFunctionalComponent;

// 클래스형 컴포넌트 예제
import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <div>Hello, Class Component!</div>;
  }
}

export default MyClassComponent;

// JSX를 사용한 컴포넌트 예제
import React from 'react';

const MyJSXComponent = () => {
  return (
    <div>
      <h1>Hello, JSX Component!</h1>
      <p>This is a JSX example.</p>
    </div>
  );
};

export default MyJSXComponent;

 

컴포넌트는 React 애플리케이션에서 핵심적인 역할을 담당하며, 이를 통해 코드의 구조를 더욱 간결하고 유연하게 구성할 수 있습니다.