React에서의 컴포넌트 라이프사이클 이해하기 🔄

안녕하세요, 웹 개발에 관심 있는 주니어 개발자 여러분! 오늘은 React에서 매우 중요한 개념 중 하나인 컴포넌트 라이프사이클에 대해 알아볼 거예요. React를 사용하면서 컴포넌트가 생성되고 업데이트되며 사라지는 과정을 이해하는 것은 앱을 더 효율적으로 만들 수 있는 열쇠입니다.

컴포넌트 라이프사이클이란?

간단히 말해서, 컴포넌트 라이프사이클은 컴포넌트가 탄생부터 소멸까지 거치는 여러 단계를 말해요. 이 과정에서 여러분은 특정 시점에 코드를 실행할 수 있습니다. React는 이를 위해 여러 라이프사이클 메서드를 제공해요.

주요 라이프사이클 메서드

1. componentDidMount()

   • 컴포넌트가 화면에 나타난 직후에 호출됩니다.
   • 여기서 데이터 로딩, 타이머 설정 등 초기화 작업을 할 수 있어요.

2. componentDidUpdate(prevProps, prevState)

   • 컴포넌트가 업데이트된 후에 호출됩니다.
   • 컴포넌트가 새로운 props나 state를 받아 업데이트되면 실행되죠.

3. componentWillUnmount()

   • 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.
   • 타이머 제거, 네트워크 요청 취소 등의 정리 작업을 여기서 해요.

간단한 예제

React 컴포넌트의 라이프사이클을 이해하기 위한 간단한 코드 예제를 보여드릴게요.

import React, { Component } from 'react';

class LifeCycleExample extends Component {
  componentDidMount() {
    console.log('컴포넌트가 화면에 나타났어요!');
  }

  componentDidUpdate() {
    console.log('컴포넌트가 업데이트되었어요!');
  }

  componentWillUnmount() {
    console.log('컴포넌트가 곧 사라질 거예요!');
  }

  render() {
    return <div>라이프사이클을 배워봅시다!</div>;
  }
}

export default LifeCycleExample;

이 예제에서는 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 사용해 컴포넌트의 주요 라이프사이클 단계에서 메시지를 콘솔에 출력하고 있어요. 실제 앱에서는 이 시점에 데이터 로딩이나 다른 초기화 작업을 수행할 수 있습니다.

마무리

React의 컴포넌트 라이프사이클을 이해하는 것은 앱의 성능을 최적화하고 버그를 줄이는 데 큰 도움이 됩니다. 오늘 배운 내용을 잘 활용하여 멋진 React 앱을 만들어보세요!