Hooks와 클래스 컴포넌트의 라이프사이클 메소드 비교

React는 두 가지 주요 방식으로 컴포넌트를 작성할 수 있게 합니다: 클래스 컴포넌트와 함수형 컴포넌트 입니다. 함수형 컴포넌트에서 상태와 라이프사이클 메소드를 사용할 수 있게 해주는 중요한 도구가 Hooks입니다. 이 글에서는 useEffect Hook과 전통적인 클래스 컴포넌트의 라이프사이클 메소드들을 비교하여, 각각의 사용 시기와 차이점을 살펴보겠습니다.

클래스 컴포넌트의 라이프사이클 메소드

클래스 컴포넌트는 다양한 라이프사이클 메소드를 제공합니다. 이 메소드는 컴포넌트의 생명주기 동안 특정 시점에 호출됩니다. 주요 라이프사이클 메소드는 다음과 같습니다:

componentDidMount

이 메소드는 컴포넌트가 처음 DOM에 마운트된 직후 호출됩니다. 여기에서 주로 데이터를 fetch하거나, 구독(setup)을 설정하는 작업을 합니다.

javascript
class MyComponent extends React.Component {
  componentDidMount() {
    // 데이터 fetch 등
  }
  render() {
    return <div>Hello, World!</div>;
  }
}

componentDidUpdate

이 메소드는 컴포넌트가 업데이트된 후 호출됩니다. 이전 프롭스나 상태를 기준으로 연산을 수행해야 하는 경우에 사용됩니다.

javascript
class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.someValue !== prevProps.someValue) {
      // 필요한 작업 수행
    }
  }
  render() {
    return <div>Hello, World!</div>;
  }
}

componentWillUnmount

이 메소드는 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 주로 구독 해제(cleanup)를 수행합니다.

javascript
class MyComponent extends React.Component {
  componentWillUnmount() {
    // 구독 해제 등
  }
  render() {
    return <div>Hello, World!</div>;
  }
}

Hooks: useEffect의 소개

React Hooks 중 하나인 useEffect는 함수 컴포넌트에서 클래스 컴포넌트의 라이프사이클 메소드와 비슷한 기능을 수행합니다. useEffect는 다음 구조를 가집니다:

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

function MyComponent() {
  useEffect(() => {
    // 컴포넌트가 마운트된 시점 또는 업데이트된 시점에 실행
    return () => {
      // 컴포넌트가 언마운트 될 시점에 실행
    };
  }, [/* 의존성 배열 */]);

  return <div>Hello, World!</div>;
}

useEffect와 클래스 컴포넌트 라이프사이클 메소드의 비교

componentDidMount vs. useEffect

componentDidMount에 해당하는 기능을 useEffect로 구현할 수 있습니다. 컴포넌트가 처음 마운트될 때 실행되도록 useEffect 내에 코드를 작성하면 됩니다.

javascript
useEffect(() => {
  // `componentDidMount` 역할
}, []); // 빈 배열은 처리한 후 다시 호출되지 않음을 보장

componentDidUpdate vs. useEffect

componentDidUpdate는 특정 값이 변경될 때 작업을 수행합니다. useEffect의 의존성 배열(dependency array)을 사용하여 비슷한 기능을 구현할 수 있습니다.

javascript
useEffect(() => {
  // `componentDidUpdate` 역할
}, [props.someValue]); // 배열 안 값이 변경될 때 실행

componentWillUnmount vs. useEffect

componentWillUnmount는 클린업을 위해 사용됩니다. useEffect에서 클린업 함수를 반환하여 같은 기능을 수행할 수 있습니다.

javascript
useEffect(() => {
  return () => {
    // `componentWillUnmount` 역할
  };
}, []); // 빈 배열로 첫 마운트시 실행

useEffect의 추가 기능

useEffect는 클래스 컴포넌트의 라이프사이클 메소드보다 유연합니다. 예를 들어, 같은 useEffect 내에서 마운트와 언마운트 작업을 함께 정의할 수 있습니다.

javascript
useEffect(() => {
  // 설정 (마운트 시)
  return () => {
    // 해제 (언마운트 시)
  };
}, []);

또한, 다수의 useEffect를 사용하여 각기 다른 의존성을 관리할 수 있습니다.

javascript
useEffect(() => {
  // 특정 prop에 대한 처리
}, [props.someValue]);

useEffect(() => {
  // 다른 prop에 대한 처리
}, [props.anotherValue]);

결론

useEffect는 함수형 컴포넌트에서 클래스 컴포넌트의 라이프사이클 메소드를 대체할 수 있는 강력한 도구입니다. 의존성 배열을 통해 업데이트 타이밍을 제어할 수 있으며, 설정과 클린업을 한꺼번에 정의할 수 있는 유연성을 제공합니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.