[React] 함수형 컴포넌트와 클래스형 컴포넌트 방식의 차이

 

 

1. 문법과 구조

- 함수형 컴포넌트는 함수 내에서 JSX를 return 하여 컴포넌트의 UI를 정의한다. 예시코드는 아래와 같다.

import React, { useState } from 'react';

const CounterComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>횟수: {count}</p>
      <button onClick={handleClick}>증가</button>
    </div>
  );
};

export default CounterComponent;

- 클래스형 컴포넌트는 Javascript ES6의 클래스로 정의된다. React.Component 클래스를 확장하여 컴포넌트를 만들며, render() 메서드 내에서 JSX를 반환하여 UI를 정의한다.

import React, { Component } from 'react';

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

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

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

export default CounterComponent;

 

2. 상태 관리와 생명주기 메서드

- 함수형 컴포넌트는 이전에는 상태를 관리할 수 없었지만, React 16.8부터 도입된 Hooks를 통해 useState, useEffect 등의 훅을 사용하여 상태와 생명주기 메서드를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 함수형 컴포넌트는 useState 훅을 사용하여 상태를 관리하고, useEffect 훅을 사용하여 생명주기 메서드를 대체한다.

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

const CountComponent = () => {
  // useState 훅을 이용하여 상태(state)를 관리합니다.
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트될 때와 업데이트될 때마다 실행
    console.log('컴포넌트가 마운트 또는 업데이트.');
    // 마운트 해제 또는 다음 업데이트 이전에 실행
    return () => {
      console.log('컴포넌트가 언마운트되기 전이거나 다음 업데이트 전');
    };
  }, [count]); // count 상태가 변경될 때만 이펙트가 실행됩니다.

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>횟수: {count}</p>
      <button onClick={incrementCount}>증가</button>
    </div>
  );
};

export default CountComponent;

 

- 클래스형 컴포넌트에서는 state와 생명주기 메서드를 사용하여 상태를 관리하고 컴포넌트의 생명주기에 따른 작업을 수행한다. this.state와 this.setState를 사용하여 상태를 관리하고, componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 구현한다

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    // 상태(state)를 클래스 필드로 선언
    this.state = {
      count: 0
    };
  }

  // 생명주기 메서드를 이용하여 특정 시점에 로직 실행
  componentDidMount() {
    console.log('컴포넌트가 마운트.');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('컴포넌트가 업데이트.');
    console.log('이전 상태:', prevState);
    console.log('현재 상태:', this.state);
  }

  componentWillUnmount() {
    console.log('컴포넌트가 언마운트.');
  }

  // 상태를 업데이트하기 위한 메서드를 정의
  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

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

export default ClassComponent;

 

함수형 컴포넌트는 더 간결하고 명료한 코드를 제공하는 반면, 클래스형 컴포넌트는 상태 관리와 생명주기 로직이 명시적으로 구분되어 있다.

 

3. 코드의 간결성과 가독성

- 함수형 컴포넌트: 일반적으로 함수형 컴포넌트는 코드가 더 간결하고 가독성이 높다. 함수형 프로그래밍의 특성을 따르기 때문에 사이드 이펙트를 줄이고 예측 가능한 동작을 보장한다.

- 클래스형 컴포넌트: 클래스형 컴포넌트는 this 키워드 및 생성자 등의 추가 개념이 필요하기 때문에 코드가 더 복잡해질 수 있다. 또한, 생명주기 메서드가 여러 개 있어서 컴포넌트의 동작을 이해하기 어려울 수 있다.

 

클래스형 컴포넌트는 상태 및 라이프사이클 메서드 사용이 용이하고, 복잡한 상태 관리나 라이프사이클 관리에 적합하다. 반면에 함수형 컴포넌트는 더 간결하며 함수의 성질을 이용하여 유연한 코드 작성이 가능하며, 최신 React 트렌드에서 사용을 권고 하고 있다. 함수형 컴포넌트는 React Hooks를 통해 상태 및 라이프사이클 관리가 가능하며, 일반 함수처럼 구성하여 테스트 및 재사용성이 좋다.