라이프사이클(클래스형 vs 함수형), react hooks

React의 라이프사이클(Lifecycle)은 React 컴포넌트의 생명주기 동안 일어나는 메서드들의 시퀀스입니다. 컴포넌트의 생명주기는 컴포넌트가 생성될 때부터 업데이트되고 제거될 때까지의 과정을 의미합니다. 각각의 라이프사이클 단계에서 React는 해당하는 메서드를 자동으로 호출하여 개발자가 원하는 작업을 수행할 수 있도록 합니다.

1. 생성 단계 (Mounting Phase):

   • constructor(): 컴포넌트가 생성될 때 호출되는 클래스 생성자 메서드입니다.

   • static getDerivedStateFromProps(): 초기화 단계에서, props의 변경으로 인해 state를 업데이트해야 할 때 호출됩니다.

   • render(): 컴포넌트의 UI를 렌더링합니다.

   • componentDidMount(): 컴포넌트가 DOM에 마운트된 직후 호출됩니다. 외부 데이터를 가져오거나 구독을 시작하는 등의 작업을 수행할 수 있습니다.

2. 업데이트 단계 (Updating Phase):

   • static getDerivedStateFromProps(): 컴포넌트가 업데이트될 때 호출되며, props의 변경으로 인해 state를 업데이트해야 할 때 사용됩니다.
   • shouldComponentUpdate(): 컴포넌트의 업데이트 여부를 결정하는 메서드로, 성능 최적화를 위해 사용됩니다.
   • render(): 변경된 내용을 기반으로 UI를 업데이트합니다.
   • getSnapshotBeforeUpdate(): 컴포넌트가 업데이트되기 직전에 호출되며, 변경 전의 DOM 상태를 캡처하는데 사용됩니다.
   • componentDidUpdate(): 컴포넌트의 업데이트가 완료된 직후 호출됩니다. 업데이트 이후의 DOM 조작이나 외부 데이터 요청 등의 작업을 수행할 수 있습니다.

3. 언마운트 단계 (Unmounting Phase):

   • componentWillUnmount(): 컴포넌트가 DOM에서 언마운트되기 전에 호출됩니다. 이벤트 리스너의 제거나 구독 취소 등의 정리 작업을 수행할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 초기 상태 설정
    this.state = {
      count: 0
    };
  }

  static getDerivedStateFromProps(props, state) {
    // props로부터 state를 업데이트하는 예시
    if (props.initialCount !== state.count) {
      return {
        count: props.initialCount
      };
    }
    return null;
  }

  componentDidMount() {
    // 컴포넌트가 마운트된 직후에 호출되는 예시
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 업데이트 여부를 결정하는 예시
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  componentDidUpdate(prevProps, prevState) {
    // 컴포넌트 업데이트 이후에 호출되는 예시
    console.log('Component updated');
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트되기 전에 호출되는 예시
    console.log('Component will unmount');
  }

  handleClick = () => {
    // 버튼 클릭 시 상태 업데이트
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increase Count</button>
      </div>
    );
  }
}

MyComponent 클래스는 React의 Component 클래스를 상속받아 작성되었습니다. 컴포넌트가 생성될 때 constructor 메서드가 호출되고 초기 상태를 설정합니다. getDerivedStateFromProps 메서드는 초기화 단계와 업데이트 단계에서 호출되며, props의 변경으로 인해 state를 업데이트할 수 있습니다.

componentDidMount 메서드는 컴포넌트가 DOM에 마운트된 직후에 호출됩니다. 이 메서드를 사용하여 외부 데이터를 가져오거나 구독을 시작할 수 있습니다.

shouldComponentUpdate 메서드는 컴포넌트의 업데이트 여부를 결정하는 메서드로, 성능 최적화를 위해 사용됩니다. 여기서는 상태(count)의 변경 여부를 기준으로 업데이트를 결정하고 있습니다.

componentDidUpdate 메서드는 컴포넌트 업데이트가 완료된 직후에 호출됩니다. 이 메서드를 사용하여 업데이트 이후의 DOM 조작이나 외부 데이터 요청 등의 작업을 수행할 수 있습니다.

componentWillUnmount 메서드는 컴포넌트가 DOM에서 언마운트되기 전에 호출됩니다. 이 메서드를 사용하여 이벤트 리스너의 제거나 구독 취소 등의 정리 작업을 수행할 수 있습니다.

render 메서드는 컴포넌트의 UI를 렌더링합니다. 상태(count)에 따라 UI가 업데이트되며, 버튼 클릭 시 상태가 업데이트됩니다.

함수형 라이프사이클

함수형 컴포넌트에서도 라이프사이클과 비슷한 동작을 할 수 있는 개념이 도입되었습니다. 이를 React Hooks라고 부릅니다. 함수형 컴포넌트에서는 useEffect Hook을 사용하여 라이프사이클과 유사한 동작을 구현할 수 있습니다.

useEffect Hook은 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있습니다. 이는 컴포넌트의 마운트, 업데이트, 언마운트와 관련된 작업을 처리하는 데 사용됩니다.

아래는 useEffect Hook을 사용한 함수형 컴포넌트의 예시입니다.

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트되거나 count 상태가 변경될 때마다 호출됩니다.
    console.log('Component mounted or count updated');

    // 언마운트 시 정리 작업을 수행하는 함수를 반환할 수 있습니다.
    return () => {
      console.log('Component will unmount');
    };
  }, [count]); // count 상태가 변경될 때만 useEffect가 호출됩니다.

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
};

useEffect Hook을 사용하여 컴포넌트의 마운트와 count 상태의 변경을 감지하고 관련 작업을 처리하고 있습니다. useEffect의 첫 번째 인자로는 콜백 함수가 전달되며, 이 함수는 컴포넌트가 렌더링될 때마다 호출됩니다. 두 번째 인자로는 의존성 배열(dependency array)이 전달되는데, 여기서는 count 상태를 의존성으로 지정하였습니다. 이렇게 설정하면 count 상태가 변경될 때만 useEffect 콜백이 호출됩니다.

또한, useEffect 내부에서 반환된 함수는 컴포넌트가 언마운트될 때 호출되는 정리 함수입니다. 이를 활용하여 언마운트 시 필요한 정리 작업을 수행할 수 있습니다.