[react] 생명주기 메서드를 사용하여 로컬 스토리지를 조작하는 방법은 무엇인가요?

22 Dec 2023

react

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

import React, { Component } from 'react';

class LocalStorageExample extends Component {
  componentDidMount() {
    // 컴포넌트가 마운트될 때 로컬 스토리지에서 데이터를 가져옴
    const data = localStorage.getItem('myData');
    // 가져온 데이터를 상태에 설정
    this.setState({ data });
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트될 때 로컬 스토리지에 데이터를 저장
    localStorage.setItem('myData', this.state.data);
  }

  // ...render 및 다른 메서드들
}

이 예제 코드에서는 componentDidMount 메서드를 사용하여 myData라는 키로 로컬 스토리지에서 데이터를 가져온 후 컴포넌트의 상태에 설정하고, componentWillUnmount 메서드를 사용하여 컴포넌트가 언마운트될 때 해당 데이터를 로컬 스토리지에 저장합니다.

참고 문헌:

React 생명주기 메서드: https://ko.reactjs.org/docs/react-component.html#the-component-lifecycle