[React.js] 클래스형 컴포넌트의 단점 3가지

1. 문법이 복잡하고 코드가 길어짐

2. 상태 관리와 라이프사이클 관리의 복잡성

3. this 키워드의 사용

 

1. 문법이 복잡하고 코드가 길어짐

• 클래스형 컴포넌트는 constructor, this.state, 그리고 this를 바인딩해야 하는 등 초기 설정이 비교적 복잡합니다.
• 함수형 컴포넌트와 비교했을 때 동일한 기능을 구현하는데 더 많은 코드와 반복적인 작업이 필요합니다.

클래스형 컴포넌트:

import React, { Component } from 'react';

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

  handleIncrement() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

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

export default Counter;

 

함수형 컴포넌트

import React, { useState } from 'react';

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

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

export default Counter;

 

 

2. 상태 관리와 라이프사이클 관리의 복잡성

• 클래스형 컴포넌트에서 상태를 업데이트하거나 라이프사이클 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 다루는 것은 함수형 컴포넌트의 useEffect보다 직관적이지 않습니다.
• 라이프사이클 메서드로 인해 관련된 로직이 여러 메서드로 분산될 수 있습니다.

클래스형 컴포넌트:

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ time: new Date() });
  }

  render() {
    return <p>Time: {this.state.time.toLocaleTimeString()}</p>;
  }
}

export default Timer;

 

 

함수형 컴포넌트:

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

function Timer() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timerID); // Cleanup
  }, []);

  return <p>Time: {time.toLocaleTimeString()}</p>;
}

export default Timer;

 

 

3. this 키워드의 사용

• 클래스형 컴포넌트에서는 this 키워드가 필수적으로 사용됩니다.
• 이로 인해 this의 컨텍스트를 명시적으로 바인딩하거나 호출하지 않으면 의도치 않은 에러가 발생할 수 있습니다. 이를 방지하기 위해 bind 메서드나 클래스 필드 문법을 사용해야 합니다.

클래스형 컴포넌트:

import React, { Component } from 'react';

class ClickButton extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props.message);
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

export default ClickButton;

 

 

함수형 컴포넌트:

import React from 'react';

function ClickButton({ message }) {
  const handleClick = () => {
    console.log(message);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

export default ClickButton;