8. 함수형 컴포넌트와 클래스형 컴포넌트 - 2

클래스형 컴포넌트의 개념과 생명주기(Lifecycle) 메서드

React에서 컴포넌트를 만드는 두 가지 방법 중 하나는 클래스형 컴포넌트입니다. 이번 포스트에서는 클래스형 컴포넌트의 개념과 생명주기 메서드에 대해 알아보겠습니다.

클래스형 컴포넌트의 개요

클래스형 컴포넌트는 ES6의 class 문법을 사용하여 React 컴포넌트를 정의하는 방식입니다. 다음은 간단한 클래스형 컴포넌트의 예시입니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default MyComponent;

생명주기(Lifecycle) 메서드

클래스형 컴포넌트는 다양한 생명주기 메서드를 제공하여 컴포넌트의 생성, 업데이트, 소멸 등의 과정에 특정한 동작을 수행할 수 있습니다. 주요 생명주기 메서드는 다음과 같습니다.

1. constructor(): 컴포넌트가 생성될 때 호출되는 메서드입니다. 초기 상태(state)를 설정하거나 이벤트 핸들러를 바인딩하는 등의 작업을 수행합니다.
2. componentDidMount(): 컴포넌트가 화면에 렌더링된 후 호출되는 메서드입니다. 외부 데이터를 불러오거나 초기화 작업을 수행하는 등의 작업을 수행합니다.
3. componentDidUpdate(prevProps, prevState): 컴포넌트가 업데이트된 후 호출되는 메서드입니다. 이전 props나 state와 현재 props나 state를 비교하여 필요한 작업을 수행합니다.
4. componentWillUnmount(): 컴포넌트가 소멸되기 직전에 호출되는 메서드입니다. 이벤트 리스너의 해제나 타이머의 해제 등의 정리 작업을 수행합니다.

클래스형 컴포넌트의 장단점

장점

1. 더 많은 기능과 유연성: 생명주기 메서드를 통해 컴포넌트의 동작을 더 세밀하게 제어할 수 있습니다.
2. 컴포넌트 상태(state) 관리가 용이: 클래스형 컴포넌트는 내부 상태를 가질 수 있어서 복잡한 상태를 관리하기에 좋습니다.

단점

1. 코드가 복잡해질 수 있음: 클래스형 컴포넌트는 코드의 양이 많아질 수 있고, 생명주기 메서드의 사용이 복잡할 수 있습니다.

마무리

클래스형 컴포넌트는 React의 초기부터 사용되어 온 방식으로, 여전히 많은 프로젝트에서 활발하게 사용되고 있습니다. 생명주기 메서드를 통해 컴포넌트의 동작을 세밀하게 제어할 수 있어서, 특히 복잡한 UI나 상태 관리가 필요한 경우에 유용하게 사용될 수 있습니다. 하지만 최근에는 함수형 컴포넌트와 React Hooks를 사용하여 클래스형 컴포넌트보다 더 간결하고 효율적인 코드를 작성하는 추세입니다.