예를 들어, 컴포넌트가 마운트될 때 상태를 로컬 스토리지에 저장하고, 업데이트될 때 이를 복원할 수 있습니다. 이를 위해 componentDidMount 메서드에서 상태를 로컬 스토리지에 저장하고, componentDidUpdate 메서드에서 이를 복원하는 로직을 구현할 수 있습니다.

아래는 간단한 예제 코드입니다.

import React, { Component } from 'react';

class App extends Component {
  componentDidMount() {
    const savedState = localStorage.getItem('appState');
    if (savedState) {
      this.setState(JSON.parse(savedState));
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState !== this.state) {
      localStorage.setItem('appState', JSON.stringify(this.state));
    }
  }

  // ... 

  render() {
    // ...
  }
}

export default App;

이 예제에서 componentDidMount 메서드에서는 이전에 저장된 상태를 로컬 스토리지에서 가져와서 setState를 사용하여 상태를 업데이트합니다. 그리고 componentDidUpdate 메서드에서는 상태가 업데이트될 때마다 이를 로컬 스토리지에 다시 저장합니다.

이러한 방식으로 생명주기 메서드를 활용하여 상태를 저장하고 복원할 수 있습니다.

참고 문헌:

• React 문서: https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class