[React] 리액트 클래스 컴포넌트, 왜 아직도 알아야 할까?

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

 

이번 글에서는 클래스 컴포넌트의 구조, 생명주기 메서드, 컨텍스트 사용 방식, 그리고 오류 경계까지 정리해봤습니다. ✍️

 

🎈 클래스 컴포넌트 기본 구조

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

• React.Component를 상속받아 정의합니다.
• render() 메서드 안에서 JSX를 반환해야 합니다.

🤔 왜 존재할까?

• React 16.8 이전에는 state나 생명주기 메서드를 사용하려면 클래스 컴포넌트로 작성해야 했습니다.
• 이후 Hooks가 등장하면서 함수형 컴포넌트에서도 동일한 기능이 가능해졌고, 지금은 함수형이 대세가 되었습니다.

 

 

---

🎈 클래스에서 상태(State) 관리

constructor() {
  super(); // 반드시 호출
  this.state = {
    showUsers: true,
    // 다른 상태들도 이 객체 안에 정의
  };
}

toggleUsersHandler() {
  this.setState((prevState) => {
    return { showUsers: !prevState.showUsers };
  });
}

• 클래스 컴포넌트에서는 상태를 객체로 관리되어 집니다.
• 생성자(constructor)에서 this.state = { ... }로 초기화합니다.
• 상태 변경은 this.setState()로 수행하며 기존 상태와 병합되므로 전체를 덮어쓰지 않기 때문에 부분 업데이트가 가능합니다.
• 이벤트 핸들러는 반드시 this 바인딩 필요 합니다.

this.toggleUsersHandler.bind(this)

 

 

---

🎈 생명주기 메서드 (Lifecycle Methods)

함수형 컴포넌트의 useEffect()와 대응되는 클래스 컴포넌트의 고유 메서드입니다.

생명주기 메서드 언제 실행되나요? useEffect와 비교

componentDidMount()	컴포넌트가 마운트된 직후 실행됨	useEffect(() => { }, [])
componentDidUpdate()	컴포넌트가 업데이트된 후 실행됨	useEffect(() => { }, [value])
componentWillUnmount()	컴포넌트가 언마운트되기 직전에 실행됨	useEffect(() => { return () => {} }, [])

✅ componentDidMount는 API 호출이나 초기 설정 작업에 자주 사용됩니다.

 

 

---

🎈 클래스 컴포넌트에서 Context 사용하기

✅ 방법 1: <Context.Consumer> 사용

<UsersContext.Consumer>
  {(ctx) => <div>{ctx.users[0].name}</div>}
</UsersContext.Consumer>

• 함수형과 클래스형 컴포넌트 모두에서 사용할 수 있습니다.
• 단점 : 매번 Consumer로 감싸야 하기 때문에 코드가 길어지고 복잡해질 수 있습니다.

✅ 방법 2: static contextType 사용하기 (클래스 컴포넌트 전용)

import UsersContext from "../store/users-context";

class UserFinder extends Component {
  static contextType = UsersContext;

  componentDidMount() {
    console.log(this.context.users); // 여기서 컨텍스트 데이터 사용 가능
  }

  render() {
    return <Users users={this.context.users} />;
  }
}

• 클래스 컴포넌트에서 가장 많이 쓰는 Context 접근 방식입니다.
• 컴포넌트에 static contextType = UsersContext를 선언하면, → React가 내부적으로 해당 Context의 값을 this.context에 자동으로 넣어줍니다
• 단점: 한 컴포넌트에 오직 하나의 context만 연결 가능

🔍 왜 static이어야 할까?

• static 속성은 클래스의 인스턴스가 아니라 클래스 자체에 바인딩되는 속성입니다.
• 따라서 React는 컴포넌트가 인스턴스화되기 전에 이 정보를 미리 읽고 준비할 수 있습니다.
• 즉, 렌더링 전에 "아, 이 컴포넌트는 어떤 Context랑 연결되어 있어야 하구나!" 를 인지할 수 있는 방식이에요.

❓ 그럼 왜 하나만 연결 가능?

• contextType은 하나의 값만 가질 수 있는 정적 속성
• 즉, static이라는 속성은 중복 선언이 불가능하니까

 

 

 

---

🎈 오류 경계(Error Boundary)

• 하위 컴포넌트에서 예기치 못한 오류가 발생하더라도 자동으로 감지하고 처리하여 전체 앱이 죽지 않도록 방지하기 위해 사용합니다.
• 단,이 기능은 클래스 컴포넌트에서만 구현할 수 있습니다.

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor() {
    super();
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // 오류 로깅 가능
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <p>문제가 발생했습니다. 😢</p>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

사용 예시:

import ErrorBoundary from './ErrorBoundary';
import Users from './Users';

function App() {
  return (
    <ErrorBoundary>
      <Users />
    </ErrorBoundary>
  );
}

• Users 컴포넌트에서 오류가 발생해도 전체 앱이 중단되지 않고 "문제가 발생했습니다" 메시지를 출력하게 됩니다.

⚠️ 주의할 점

• 반드시 클래스 컴포넌트여야 합니다.
• 함수형 컴포넌트에서는 componentDidCatch()를 사용할 수 없습니다.
• 여러 오류 처리 방식이 필요하다면 각 컴포넌트에 별도의 오류 경계를 만들 수도 있습니다.

 

 

 

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!