[Next.js14 강의] 7강 - 함수형 컴포넌트와 클래스형 컴포넌트 개요

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 React와 Next.js에서 사용되는 두 가지 주요 컴포넌트 유형인 함수형 컴포넌트(Function Components)와 클래스형 컴포넌트(Class Components)의 차이점과 사용 방법을 살펴봅니다. 이를 통해 컴포넌트의 구조와 상태 관리 방식을 이해할 수 있습니다.

 

 

1. 컴포넌트란 무엇인가?

 

컴포넌트의 개념

· 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드의 블록입니다. React와 Next.js에서는 이러한 컴포넌트를 사용하여 웹 애플리케이션의 UI를 구성합니다.
· 컴포넌트는 일반적으로 HTML을 반환하며, 그 자체로도 다른 컴포넌트를 포함할 수 있습니다.

 

 

2. 함수형 컴포넌트(Function Components)

 

함수형 컴포넌트의 정의

· 함수형 컴포넌트는 JavaScript 함수로 정의되며, React의 기본적인 컴포넌트 유형입니다. 함수형 컴포넌트는 props라는 매개변수를 받아 JSX를 반환합니다.
· 간결하고 작성하기 쉬우며, 최근 React 버전에서는 상태와 라이프사이클 기능도 훅(Hooks)을 통해 처리할 수 있습니다.

728x90

함수형 컴포넌트 예제

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

 

이 컴포넌트는 name이라는 props를 받아서 "Hello, {name}!"이라는 메시지를 출력합니다.

 

함수형 컴포넌트의 장점

· 함수형 컴포넌트는 코드가 간결하며 이해하기 쉽습니다.
· React 훅(Hooks)을 사용하여 상태 관리와 사이드 이펙트를 처리할 수 있습니다.
· 함수형 컴포넌트는 클래스형 컴포넌트보다 성능이 더 우수합니다.

 

 

3. 클래스형 컴포넌트(Class Components)

 

클래스형 컴포넌트의 정의

· 클래스형 컴포넌트는 React.Component를 상속받아 정의되며, 컴포넌트의 상태와 라이프사이클 메서드를 처리할 수 있습니다.
· 클래스형 컴포넌트는 과거 React에서 주요하게 사용되었으나, 최근에는 함수형 컴포넌트가 주로 사용됩니다.

반응형

클래스형 컴포넌트 예제

import React, { Component } from 'react';

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

export default Greeting;

 

이 컴포넌트는 함수형 컴포넌트와 동일한 기능을 하지만, 클래스 구문을 사용하여 정의되었습니다.

 

클래스형 컴포넌트의 장점

· 상태(state)와 라이프사이클 메서드를 명확하게 사용할 수 있습니다.
· 이전 React 버전에서는 클래스형 컴포넌트가 상태를 처리할 수 있는 유일한 방법이었습니다.

 

 

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

 

상태 관리

· 함수형 컴포넌트: React 훅(Hooks)을 사용하여 상태를 관리합니다. 예를 들어, useState, useEffect 훅이 자주 사용됩니다.

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

 

 

· 클래스형 컴포넌트: 상태를 this.state로 관리하고, 상태를 업데이트하려면 this.setState 메서드를 사용합니다.

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

 

SMALL

라이프사이클 메서드

· 함수형 컴포넌트: useEffect 훅을 사용하여 라이프사이클 메서드를 대체할 수 있습니다. useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount를 합쳐 놓은 훅입니다.

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행
    console.log('Component mounted');

    return () => {
      // 컴포넌트가 언마운트될 때 실행
      console.log('Component unmounted');
    };
  }, []);

  return <div>Hello, World!</div>;
}

 

 

· 클래스형 컴포넌트: componentDidMount, componentDidUpdate, componentWillUnmount 등과 같은 라이프사이클 메서드를 제공합니다.

class Example extends Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component unmounted');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

 

 

 

5. 언제 무엇을 사용할까?

 

함수형 컴포넌트 권장

· 대부분의 경우, 함수형 컴포넌트를 사용하는 것이 좋습니다. 코드가 더 간결하고, 훅을 사용하여 강력한 상태 관리와 라이프사이클 제어가 가능하기 때문입니다.

클래스형 컴포넌트 사용 시점

· 이전에 작성된 코드베이스에서 클래스형 컴포넌트를 사용하고 있을 경우, 일관성을 유지하기 위해 계속 사용할 수 있습니다.
· 함수형 컴포넌트로 표현하기 복잡한 특정한 상황에서는 클래스형 컴포넌트를 고려할 수도 있습니다.

 

이 강의를 통해 함수형 컴포넌트와 클래스형 컴포넌트의 차이점을 이해하고, 각 컴포넌트를 언제 사용하는 것이 적절한지 알게 되었습니다. 앞으로 Next.js 프로젝트를 진행할 때 어떤 컴포넌트를 사용할지 결정할 수 있는 기준을 세울 수 있을 것입니다.

 

 

- 이전 수업 목록