[REACT] 함수형 컴포넌트와 클래스형 컴포넌트

SungWoo·2024년 12월 8일

React

목록 보기

11/16

리액트는 UI를 구성하는 기본 단위로 컴포넌트를 사용한다. 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 이번 포스팅에서는 두 컴포넌트 유형에 대해 정리해보자.

1. 함수형 컴포넌트 (Function Component)

JavaScript 함수를 정의하여 컴포넌트를 만드는 방식

함수형 컴포넌트는 자바스크립트 함수로 정의되며, props 를 입력받아 JSX를 반환한다.

import React from 'react';

// function 키워드를 사용한 함수형 컴포넌트
function FunctionComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a function component.</p>
    </div>
  );
}

// 화살표 함수를 사용한 함수형 컴포넌트
const FunctionComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a function component.</p>
    </div>
  );
};

export default FunctionComponent;

React Hooks

리액트 훅의 도입으로 인해 함수형 컴포넌트에서도 상태 관리와 생명주기 로직을 처리할 수 있게 되었다.

useState와 useEffect를 활용한 상태 관리와 부수효과 처리 예시

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Component did mount or update');
    return () => console.log('Component will unmount');
  }, [count]); // count 값이 변경될 때만 실행

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

export default Counter;

장점

간결하고 직관적인 코드
- 함수형 컴포넌트는 클래스 문법이 필요 없으므로 코드가 간결하고 직관적이다.
리액트 훅
- 클래스에서 볼 수 있는 복잡한 생명주기 메서드를 사용하지 않고도 useState , useEffect 등 훅을 통해 상태 관리와 생명주기 메서드의 기능을 간단히 구현할 수 있다.
- 커스텀 훅을 통해 공통 상태 관리 로직을 모듈화하여, 이를 여러 컴포넌트에서 재사용할 수 있다.
테스트 용이성
- 함수형 컴포넌트는 순수 함수 형태로 작성되므로 외부 상태에 의존하지 않고 독립적으로 테스트할 수 있다.

2. 클래스형 컴포넌트

ES6 클래스 문법을 사용하여 컴포넌트를 만드는 방식

클래스형 컴포넌트는 ES6 클래스로 정의되며, React.Component 또는 React.PureComponent 를 확장하여 만든다. 상태 관리와 생명주기 메서드를 활용하여 컴포넌트를 관리할 수 있다.

import React, { Component } from 'react';

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

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate() {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

export default Counter;

장점

생명주기 메서드
- 클래스형 컴포넌트는 componentDidMount , componentDidUpdate ,componentWillUnmount 와 같은 생명주기 메서드를 통해 컴포넌트의 상태 변화 및 부수 효과를 세밀히 제어할 수있다.
명확한 상태 관리
- this.state , this.setState 를 통해 컴포넌트 상태를 명확히 관리할 수 있으며, 클래스 내부 메서드를 통해 코드가 구조적으로 분리될 수 있다.
복잡한 어플리케이션에서 유용
- 대규모 어플리케이션에서 다수의 상태를 세밀히 관리하거나, 초기 데이터 로딩과 같은 복잡한 작업에 적합하다.