React - Lifecycle, useEffect

❶ Lifecycle 개념

React 컴포넌트의 라이프사이클은 컴포넌트가 마운트(mount), 업데이트(update), 언마운트(unmount)될 때 일어나는 이벤트들입니다.
이러한 라이프사이클 이벤트들은 클래스 컴포넌트에서 사용할 수 있으며, 함수형 컴포넌트에서는 useEffect 훅을 사용하여 대체할 수 있습니다.

React의 라이프사이클 이벤트는 크게 세 가지로 나눌 수 있습니다.

1. 마운트(Mounting) 라이프사이클

• constructor: 컴포넌트가 생성될 때 실행되는 메서드입니다.
• getDerivedStateFromProps: props로부터 상태를 생성하는 메서드입니다.
• render: 컴포넌트가 UI를 렌더링하는 메서드입니다.
• componentDidMount: 컴포넌트가 마운트된 직후에 실행되는 메서드입니다.

2. 업데이트(Updating) 라이프사이클

• getDerivedStateFromProps: props로부터 상태를 생성하는 메서드입니다.
• shouldComponentUpdate: 컴포넌트가 업데이트되어야 할지를 결정하는 메서드입니다.
• render: 컴포넌트가 UI를 렌더링하는 메서드입니다.
• getSnapshotBeforeUpdate: 업데이트 이전에 DOM 상태를 가져오는 메서드입니다.
• componentDidUpdate: 컴포넌트가 업데이트된 직후에 실행되는 메서드입니다.

3. 언마운트(Unmounting) 라이프사이클

• componentWillUnmount: 컴포넌트가 언마운트되기 전에 실행되는 메서드입니다.

이외에도, 에러(Error) 라이프사이클과 렌더링(Rendering) 라이프사이클 등이 있습니다.

React의 라이프사이클 이벤트는 컴포넌트의 상태 변화에 따라 실행되며, 이를 통해 컴포넌트가 언제 업데이트되어야 할지, 언제 UI를 렌더링해야 할지 등을 결정할 수 있습니다.
이를 이용하여, React 애플리케이션을 효율적으로 작성할 수 있습니다.

❷ 예제를 통한 Lifecycle 이해하기

import React, { Component } from 'react';

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

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button>
        <button onClick={() => this.setState({ count: this.state.count - 1 })}>-</button>
      </div>
    );
  }
}

위 코드에서는 Example 클래스 컴포넌트를 정의하고, count state를 관리합니다.
componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드를 사용하여 컴포넌트의 마운트, 업데이트, 언마운트 시점에 실행될 코드를 작성하고, 이를 통해 컴포넌트의 상태 변화에 따라 특정 작업을 수행할 수 있습니다.

생성자(constructor)에서는 컴포넌트의 초기 상태를 설정합니다.
componentDidMount에서는 컴포넌트가 DOM에 마운트된 직후에 실행될 코드를 작성합니다. componentDidUpdate에서는 컴포넌트가 업데이트된 직후에 실행될 코드를 작성합니다. componentWillUnmount에서는 컴포넌트가 언마운트될 때 실행될 코드를 작성합니다.

React 클래스형 컴포넌트의 라이프사이클 이벤트를 사용하여, 컴포넌트의 상태 변화에 따른 특정 작업을 수행할 수 있습니다.

❸ useEffect 개념

React에서 useEffect는 함수형 컴포넌트에서 상태(state)와 라이프사이클(lifecycle) 이벤트를 다루는 훅(Hook) 중 하나입니다.

useEffect 훅은 컴포넌트가 렌더링될 때마다 실행됩니다.
useEffect 훅은 두 가지 매개변수를 받습니다.
첫 번째 매개변수는 콜백 함수이고, 두 번째 매개변수는 의존성 배열(dependency array)입니다.
(배열은 넣지 않아도 됩니다.)

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

위 코드에서는 Example 함수형 컴포넌트를 정의하고, count state를 관리합니다.
useEffect 훅을 사용하여, 컴포넌트가 렌더링될 때마다 실행될 콜백 함수를 작성합니다.
이 콜백 함수는 document.title 값을 변경하는 작업을 수행합니다.

두 번째 매개변수로 count state를 전달하면, count state가 변경될 때만 useEffect 콜백 함수가 실행됩니다. 이렇게 함으로써, 불필요한 렌더링을 방지하고, 컴포넌트의 성능을 최적화할 수 있습니다.

useEffect 훅은 컴포넌트의 상태(state)나 속성(props)이 변경될 때, 브라우저의 DOM을 업데이트하기 이전에 특정 작업을 수행할 수 있습니다.
useEffect 훅은 클래스형 컴포넌트에서 사용되는 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드와 비슷한 역할을 합니다.