[React] 컴포넌트 정의, 함수형 컴포넌트 vs 클래스형 컴포넌트 비교

 

리액트의 컴포넌트(Component)

UI를 구성하는 독립적이고 재사용 가능한 코드의 조각이다.

컴포넌트는 리액트 애플리케이션의 기본적인 빌딩 블록이며, 화면에 표시할 요소를 정의한다.

리액트에서는 컴포넌트를 사용하여 복잡한 UI를 작은 단위로 나누고, 이를 조합하여 전체 애플리케이션을 구축한다.

 

 

컴포넌트 주요 개념

Props

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

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.
• 읽기 전용입니다(수정 불가).

State

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>
    );
}

• 컴포넌트 내부에서 관리하는 동적인 데이터입니다.
• useState Hook이나 클래스형 컴포넌트의 this.state로 사용합니다.

컴포넌트 생명주기

• 컴포넌트가 생성, 업데이트, 소멸되는 과정을 다룹니다.
• 함수형 컴포넌트에서는 useEffect로, 클래스형 컴포넌트에서는 생명주기 메서드로 처리합니다.

 

 

컴포넌트의 특징과 종류

1. 독립적: 컴포넌트는 서로 독립적으로 동작하며, 각각 자신만의 상태(state)와 속성(props)을 가질 수 있다.
2. 재사용 가능: 컴포넌트는 재사용성을 고려하여 설계되므로 여러 곳에서 쉽게 재사용할 수 있다.
3. 계층적 구조: 부모-자식 관계로 구성되어 상위 컴포넌트가 하위 컴포넌트를 포함할 수 있다.

 

함수형 컴포넌트 (Function Component)

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

• ES6 함수 형태로 정의된 컴포넌트
• React Hooks를 사용해 상태(state)와 생명주기 기능을 다룰 수 있다ㅏ.
• 작성 방식이 간단하고 코드가 간결합니다.
• 자바스크립트 함수로 작성
• this 키워드 불필요
• return을 사용해 JSX 반환

 

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

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

• ES6 클래스 형태로 정의된 컴포넌트
• state와 생명주기 메서드(예: componentDidMount)를 사용할 수 있다.
• 함수형 컴포넌트에 Hooks가 도입되면서 최근에는 사용 빈도가 줄어드는 추세임
• Component 를 상속(extends)받아 클래스 형태로 작성
• this 키워드 사용
• render() 메서드를 통해 JSX 반환

 

 

State와 Lifecycle 관리

함수형 컴포넌트

useState, useEffect 같은 React Hooks를 사용하여 상태와 라이프사이클을 관리함

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count changed: ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

 

useEffect( () => { console.log("Count changed: ${count}"); }, [count]); 의 의미

: 특정값이 업데이트 될 때 실행하고 싶을 때 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.

count 값이 업데이트 될 때마다 useEffect 함수가 실행되면서 console.log를 찍어준다.

*위 함수는 업데이트 될 때 뿐만 아니라, 마운트 될 때도 실행됨

 

 

여기서 잠깐 useEffect 에 대해 개념만 잠깐 정리하고 가겠다. (새로 포스팅 쓸 예정)

* useEffect() 함수란

: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.

컴포넌트가 mount 됐을 때, unmount 됐을 때, update 됐을 때, 특정 작업을 처리할 수 있다.

클래스 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 한 개념

* useEffect() 사용법

기본형태 : useEffect( function, deps )

function : 수행하고자 하는 작업

deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 

 

 

 

클래스형 컴포넌트

state와 라이프사이클 메서드 (componentDidMount, componentDidUpdate, componentWillUnmount) 를 사용한다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidUpdate() {
    console.log(`Count changed: ${this.state.count}`);
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button>
      </div>
    );
  }
}

 

 

성능 및 최적화

함수형 컴포넌트는 가볍다 : 불필요한 코드 (this의 사용, 복잡한 라이프사이클) 제거됨

React 16.8 이후 Hooks의 지원으로 클래스형 컴포넌트 대부분이 함수형 컴포넌트로 대체됨

React는 함수형 컴포넌트를 최적화하는 기술 React.memo 를 제공함

 

코드 간결성과 유지보수성

함수형 컴포넌트가 더 간결하고 읽기 쉬움

React 공식 문서에서도 함수형 컴포넌트를 권장함

 

현재 트렌드

함수형 컴포넌트가 더 간단하고 현대적인 방식이고, React 공식적으로도 추천하는 방식이다.

클래스형 컴포넌트는 레거시를 유지보수하는 경우 외에는 잘 사용되지 않음

React 개발에서는 대부분 함수형 컴포넌트 + Hooks 조합을 사용함