React에서 Hooks와 클래스형 컴포넌트의 차이

 

React는 웹 애플리케이션을 구축하기 위한 강력한 라이브러리로, 2013년 처음 등장한 이후 다양한 방식으로 컴포넌트를 작성할 수 있게 해주었습니다. 그 중 대표적인 방식이 바로 **클래스형 컴포넌트(Class Component)**와 **함수형 컴포넌트(Function Component)**입니다. 후자는 React 16.8 버전부터 도입된 Hooks를 통해 더 직관적이고 효율적으로 작성할 수 있게 되었습니다.

그렇다면 Hooks와 클래스형 컴포넌트는 어떤 차이가 있을까요? 각 방식의 장단점은 무엇이고, 실제로 어떤 상황에서 어떤 방식을 사용해야 할까요? 이 글에서는 React의 Hooks와 클래스형 컴포넌트의 차이점과 함께, 각각의 특징을 살펴보겠습니다.

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

React가 처음 등장했을 때, 컴포넌트는 모두 클래스형 컴포넌트로 작성되었습니다. 클래스형 컴포넌트는 ES6 클래스 문법을 기반으로 하며, React 컴포넌트는 반드시 render() 메서드를 구현해야 했습니다. 클래스형 컴포넌트는 상태 관리, 생명주기 메서드 등을 통해 컴포넌트의 로직을 정의합니다.

클래스형 컴포넌트의 기본 구조

import React, { Component } from 'react';

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

  componentDidMount() {
    // 컴포넌트가 마운트된 후 실행되는 메서드
    console.log('컴포넌트가 마운트되었습니다');
  }

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

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={this.handleClick}>카운트 증가</button>
      </div>
    );
  }
}

export default MyComponent;

주요 특징

1. 상태 관리 (State)
   클래스형 컴포넌트에서는 state를 객체로 선언하고, setState 메서드를 사용하여 상태를 업데이트합니다.
2. 생명주기 메서드
   클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 통해 컴포넌트의 다양한 상태를 관리합니다. 예를 들어, API 호출이나 이벤트 등록 등의 비동기 작업을 생명주기 메서드에서 처리합니다.
3. this 키워드
   클래스형 컴포넌트에서는 this를 사용해 상태나 메서드에 접근합니다. 특히, this 바인딩을 제대로 하지 않으면 이벤트 핸들러에서 문제가 발생할 수 있습니다.

장점

• 명확한 구조: 클래스형 컴포넌트는 render() 메서드, state, props, 생명주기 메서드 등으로 명확한 구조를 제공합니다.
• 생명주기 관리: 컴포넌트 생명주기 메서드를 통해 애플리케이션의 상태를 세밀하게 제어할 수 있습니다.

단점

• 긴 코드: 상태 관리 및 생명주기 메서드를 설정하는 데 코드가 길어지고 복잡해질 수 있습니다.
• this 바인딩 문제: 클래스형 컴포넌트에서는 this를 바인딩하는 데 주의해야 하며, 이를 잘못 처리하면 버그가 발생할 수 있습니다.

2. 함수형 컴포넌트와 Hooks

React 16.8부터 함수형 컴포넌트에 Hooks 기능이 도입되면서, 상태 관리나 생명주기 메서드 없이도 함수형 컴포넌트만으로도 강력한 기능을 구현할 수 있게 되었습니다. 함수형 컴포넌트는 단순히 JavaScript 함수로 작성되며, render() 메서드를 필요로 하지 않습니다.

함수형 컴포넌트와 Hooks의 기본 구조

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

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

  useEffect(() => {
    // 컴포넌트가 마운트되었을 때 실행되는 함수
    console.log('컴포넌트가 마운트되었습니다');
  }, []); // 빈 배열을 전달하면 컴포넌트가 처음 마운트될 때만 실행

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={handleClick}>카운트 증가</button>
    </div>
  );
};

export default MyComponent;

주요 특징

1. 상태 관리 (State)
   useState 훅을 사용하여 상태를 관리합니다. 상태는 변수처럼 선언되며, 상태를 변경하는 함수도 함께 반환됩니다.
2. 부수 효과 관리 (Side Effects)
   useEffect 훅을 사용하여 컴포넌트가 마운트되거나 업데이트될 때, 또는 특정 값이 변경될 때마다 부수 효과를 실행할 수 있습니다. componentDidMount, componentDidUpdate, componentWillUnmount를 useEffect로 대체할 수 있습니다.
3. 간결한 코드
   함수형 컴포넌트는 클래스형 컴포넌트보다 코드가 더 간결하고 읽기 쉬운 장점이 있습니다.

장점

• 간결하고 직관적: 함수형 컴포넌트는 코드가 더 간결하고 직관적입니다. 특히 useState, useEffect와 같은 훅을 사용하면 상태 관리와 부수 효과를 쉽게 처리할 수 있습니다.
• this 문제 없음: 클래스형 컴포넌트에서 발생할 수 있는 this 바인딩 문제를 피할 수 있습니다.
• 재사용 가능한 로직: 여러 개의 훅을 사용해 로직을 모듈화하고 재사용할 수 있어 코드의 유지보수성이 높아집니다.

단점

• 초기 학습 곡선: useEffect와 같은 훅을 잘 활용하려면 React의 내부 동작 방식에 대한 이해가 필요합니다.
• 생명주기 관리의 어려움: 클래스형 컴포넌트에 비해 생명주기 메서드를 직접적으로 사용하지 않기 때문에, 복잡한 생명주기 로직을 구현할 때 불편할 수 있습니다. 하지만 이는 useEffect로 어느 정도 해결 가능합니다.

3. 클래스형 컴포넌트와 Hooks의 차이점 비교

특징 클래스형 컴포넌트 함수형 컴포넌트 + Hooks

상태 관리	this.state와 this.setState 사용	useState 훅 사용
생명주기 메서드	componentDidMount, componentDidUpdate 등	useEffect 훅으로 대체
코드 길이	비교적 긴 코드, 복잡한 구조	간결하고 읽기 쉬운 코드
this 사용 여부	this 사용	this 사용 안 함
재사용성	로직 재사용을 위해 HOC나 Render Props 사용	훅을 이용한 로직 재사용 가능
학습 난이도	상대적으로 낮음	useEffect나 useRef 등 추가 학습 필요

4. 결론: 어떤 방식이 더 적합할까?

React에서 클래스형 컴포넌트와 함수형 컴포넌트는 모두 유용하게 사용될 수 있습니다. 하지만 최근 React 커뮤니티에서는 함수형 컴포넌트와 Hooks를 선호하는 추세입니다. 그 이유는 함수형 컴포넌트가 더 간결하고 직관적이며, 특히 상태 관리와 부수 효과를 처리하는 데 있어 훅이 더 유연하고 강력하기 때문입니다.

따라서 새로운 React 프로젝트를 시작하거나 기존 프로젝트를 업데이트하는 경우, 함수형 컴포넌트와 Hooks를 사용하는 것이 더 많은 이점을 제공할 수 있습니다. 그러나 기존에 클래스형 컴포넌트를 많이 사용하고 있는 코드베이스에서는 점진적인 변경을 고려하는 것이 좋습니다.

React의 발전은 끊임없이 이루어지고 있으며, 현재와 미래의 방향은 함수형 컴포넌트와 훅 중심으로 가고 있습니다. 따라서 이제는 Hooks와 **함

수형 컴포넌트**를 사용하는 것이 권장되는 방식입니다.