리액트 컴포넌트란? 함수형 / 클래스형

리액트(React)에서 컴포넌트

UI를 구성하는 독립적이고 재사용 가능한 코드 블록

HTML, CSS, 자바스크립트 로직을 하나로 묶어 특정 화면 요소를 정의하며, 리액트 애플리케이션의 기본 단위이다. 리액트는 이러한 컴포넌트를 결합해서 전체 UI를 구성한다.

컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트 두 가지로 나눌 수 있고 최근에는 훅(Hooks)의 등장으로 함수형 컴포넌트가 주로 사용된다.

 

함수형 컴포넌트(Function Component)

• 리액트에서 가장 단순하고 가볍게 쓸 수 있는 컴포넌트 방식
• 함수처럼 정의되고, props를 받아 화면을 렌더링한다.
• 상태(state)와 생명주기(lifecycle)를 관리하기 위해 리액트 훅을 사용할 수 있다.

함수형 컴포넌트 예시

import React from 'react';

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

export default Welcome;

 

위 예시에서 Welcome는 함수형 컴포넌트로, props로 전달된 값을 사용해 간단한 UI를 렌더링 한다.

 

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

• ES6 클래스 문법을 사용하여 정의된 컴포넌트
• 리액트의 Component클래스를 상속받으며, render()메서드를 통해 UI를 렌더링합니다.
• 상태(state)를 직접 관리하거나 생명주기(lifecycle) 메서드를 사용할 수 있다.
• 함수형 컴포넌트와 달리 리액트 훅이 도입되기 전에는 클래스형 컴포넌트만이 상태 관리를 할 수 있었다.

클래스형 컴포넌트 예시

import React, { Component } from 'react';

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

export default Welcome;

 

컴포넌트의 특징

• 재사용성 : 컴포넌트는 여러 곳에서 재사용할 수 있다. 동일한 컴포넌트를 다른 부분에서 재사용할 수 있어 유지보수가 용이하다.
• 독립성 : 각 컴포넌트는 독립적으로 동작하며, 하나의 컴포넌트가 다른 컴포넌트에 직접적으로 영향을 주지 않는다. 데이터 전달은 props를 통해 이루어진다.
• 구성 요소화 : 큰 애플리케이션을 여러 작은 컴포넌트로 분리하여 구조화할 수 있다. 부모 컴포넌트가 자식 컴포넌트를 포함하고, 자식 컴포넌트는 필요한 역할만 수행하면서 전체 애플리케이션을 구성하게 된다.

상태(State)와 Props

• props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터로, 자식 컴포넌트에서 수정할 수 없다.
• state는 컴포넌트 내에서 관리되는 동적인 데이터로, 컴포넌트가 자체적으로 상태를 변경할 수 있다. 상태가 변경되면 해당 컴포넌트는 다시 렌더링 된다.

리액트에서 컴포넌트를 사용하는 이유

• UI재사용성 : 컴포넌트를 작성해 놓으면 이를 여러 곳에서 쉽게 재사용할 수 있다.
• 유지보수성 : 코드가 분리되고 독립적으로 관리되기 때문에 유지보수가 용이해진다.
• 성능 최적화 : 리액트의 가상 DOM 덕분에 상태 변화에 따른 최소한의 업데이트만 발생하게 되어 성능 최적화에 유리하다.