3 React 컴포넌트 개념: 함수형 컴포넌트와 클래스형 컴포넌트

 

React 컴포넌트란?

React에서 **컴포넌트(Component)**는 UI를 구성하는 가장 기본적인 단위입니다. 컴포넌트를 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 할 수 있습니다. React는 **함수형 컴포넌트(Function Component)**와 클래스형 컴포넌트(Class Component) 두 가지 방식으로 컴포넌트를 정의할 수 있습니다.

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

1. 함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수 형태로 정의되는 컴포넌트입니다. React 16.8 이후부터는 React Hooks가 도입되면서 함수형 컴포넌트에서도 상태(state) 관리와 생명주기(lifecycle) 기능을 사용할 수 있게 되었습니다.

import React from 'react';

function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

export default Greeting;

위 코드에서 Greeting은 함수형 컴포넌트이며, props를 받아서 name 값을 출력하는 역할을 합니다.

2. 클래스형 컴포넌트

클래스형 컴포넌트는 class 문법을 사용하여 정의되며, React의 Component 클래스를 상속받아야 합니다. 클래스형 컴포넌트에서는 state를 사용할 수 있으며, 생명주기 메서드를 활용할 수 있습니다.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

export default Greeting;

함수형 컴포넌트에 비해 클래스형 컴포넌트는 문법이 다소 복잡하지만, 상태(state) 관리나 생명주기 메서드가 필요할 때 사용됩니다. 그러나 React의 최신 트렌드는 함수형 컴포넌트 + Hooks를 활용하는 방식으로 변화하고 있습니다.

Props와 컴포넌트 재사용성

1. Props란?

**Props(프로퍼티)**는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 객체입니다. Props는 읽기 전용(immutable)이며, 자식 컴포넌트에서 직접 수정할 수 없습니다.

function UserProfile(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}</p>
    </div>
  );
}

function App() {
  return <UserProfile name="김철수" age={25} />;
}

위 코드에서 UserProfile 컴포넌트는 name과 age 값을 props로 전달받아 화면에 표시합니다.

2. 컴포넌트 재사용성

컴포넌트의 가장 큰 장점은 재사용성입니다. 같은 컴포넌트를 여러 곳에서 사용할 수 있으며, props를 활용하여 다양한 데이터를 표현할 수 있습니다.

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button color="blue" label="확인" />
      <Button color="red" label="취소" />
    </div>
  );
}

위 코드에서는 Button 컴포넌트를 색상과 텍스트만 변경하여 재사용하고 있습니다.

마무리

이번 장에서는 React 컴포넌트 개념, 함수형 컴포넌트와 클래스형 컴포넌트의 차이점, props와 컴포넌트 재사용성에 대해 알아보았습니다. React에서 컴포넌트는 재사용성과 유지보수성을 높이는 핵심 요소이므로, 이를 효과적으로 활용하는 것이 중요합니다.

다음 장에서는 React의 상태(state)와 생명주기(lifecycle) 메서드에 대해 알아보겠습니다.