React 클래스 컴포넌트 마스터하기: 여전히 중요한 이유와 핵심 기능

React 세계에서 사용자 인터페이스를 구축하는 데 있어 컴포넌트는 단연코 가장 기본적인 요소입니다. 그리고 이 컴포넌트 중에서도, 특히 상태 관리와 생명주기 메서드를 다룰 때, 클래스 컴포넌트는 오랫동안 중요한 역할을 해왔습니다.

비록 함수형 컴포넌트와 훅(Hooks)이 대세로 떠오르면서 그 중요성이 다소 희석된 것처럼 보일 수 있지만, React 개발의 근간을 이해하기 위해서는 클래스 컴포넌트에 대한 명확한 지식이 필수적입니다.

오늘은 클래스 컴포넌트가 무엇인지, 그 특징은 무엇이며, 왜 여전히 배워야 할 가치가 있는지 심층적으로 알아보겠습니다.

---

클래스 컴포넌트란 무엇인가?

클래스 컴포넌트는 ES6(ECMAScript 2015) JavaScript 클래스로, React.Component를 확장하여 만들어집니다. 자체적인 상태(State) 를 유지하고 관리할 수 있으며, 컴포넌트의 특정 시점에 로직을 실행할 수 있는 생명주기 메서드(Lifecycle Methods) 와 같은 강력한 기능을 제공합니다.

이러한 특징 덕분에 시간에 따른 상태 변화를 제어해야 하는 복잡한 시나리오에 적합합니다.

---

728x90

전형적인 클래스 컴포넌트의 구조

import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0, // 초기 상태 정의
        };
    }

    // 생명주기 메서드 예시
    componentDidMount() {
        console.log('컴포넌트가 마운트되었습니다');
    }

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

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

export default MyComponent;

이 예제를 통해 파악할 수 있는 주요 특징은 다음과 같습니다.

• 생성자(Constructor): 초기 상태를 정의하고 이벤트 핸들러를 바인딩합니다.
• 생명주기 메서드(componentDidMount): 컴포넌트가 처음 DOM에 렌더링된 직후 실행됩니다.
• 이벤트 핸들러: 사용자 이벤트를 처리하여 setState를 통해 상태를 업데이트합니다.
• 렌더 메서드(Render): JSX를 반환하며 반드시 구현되어야 하는 메서드입니다.

---

클래스 컴포넌트의 주요 특징

상태 관리 (State Management)

클래스 컴포넌트는 this.state를 통해 로컬 상태를 관리합니다. 상태 변경은 this.setState()를 통해만 가능합니다.

this.setState({ keyName: newValue });

setState는 비동기적으로 동작하며 최적화를 위해 여러 변경을 묶어서 처리할 수 있습니다.

---

생명주기 메서드 (Lifecycle Methods)

클래스 컴포넌트에는 다양한 생명주기 메서드가 있어, 마운트 → 업데이트 → 언마운트 의 흐름 속에서 특정 작업을 수행할 수 있습니다.

• componentDidMount(): 컴포넌트가 마운트된 뒤 실행
• componentDidUpdate(prevProps, prevState): 상태나 프롭스 변경 후 실행
• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전 실행 (정리 작업에 필수)

---

이벤트 처리 (Event Handling)

클래스 컴포넌트에서는 이벤트 핸들러 메서드를 컨텍스트(this)와 함께 관리해야 합니다. 두 가지 방법이 있습니다.

1. 생성자에서 바인딩:

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

2. 화살표 함수 사용 (더 간결):

handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
};

---

Props 접근 (Accessing Props)

클래스 컴포넌트는 this.props를 통해 부모로부터 전달받은 데이터를 읽습니다.
프롭스는 불변(immutable) 성격을 가지므로 수정할 수 없고, UI를 동적으로 구성하는 데 사용됩니다.

---

실용적인 예시: 카운터 컴포넌트

import React from 'react';

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

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

  decrement = () => {
    if (this.state.count > 0) {
      this.setState(prevState => ({ count: prevState.count - 1 }));
    }
  };

  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={this.increment}>증가</button>
        <button onClick={this.decrement}>감소</button>
      </div>
    );
  }
}

// 사용 예시
const App = () => (
  <div>
    <Counter title="간단한 카운터" />
  </div>
);

export default App;

이 예시는 프롭스, 상태, 이벤트 처리가 함께 작동하는 전형적인 활용 사례입니다.

---

결론: 왜 여전히 알아야 하는가?

React 16.8 이후로 Hooks가 함수형 컴포넌트를 강화하면서 클래스 컴포넌트의 필요성은 줄어들었습니다. 그러나 여전히 아래와 같은 이유로 학습 가치가 있습니다.

• 레거시 코드베이스에는 클래스 컴포넌트가 광범위하게 사용됨
• 생명주기와 상태 관리 개념 이해를 돕는 기반 지식
• 기존 프로젝트 유지보수 및 마이그레이션 시 필수

따라서 React를 제대로 이해하기 위해서는 클래스 컴포넌트에 대한 확실한 이해가 반드시 필요합니다.

---

React Hooks 중심의 개발 흐름 속에서도, 클래스 컴포넌트는 React의 과거와 현재를 이어주는 중요한 개념입니다. 클래스 컴포넌트를 이해하면 함수형 컴포넌트에 대한 이해도 깊어지고, 어떤 프로젝트 상황에서도 더 유연한 대처가 가능해집니다.