[react] 생명주기 메서드를 이용하여 브라우저 캐시를 관리하는 방법은 무엇인가요?

22 Dec 2023

react

componentDidMount를 이용한 브라우저 캐시 관리

componentDidMount 생명주기 메서드는 컴포넌트가 마운트된 후 호출됩니다. 이를 이용하여 캐시된 데이터를 요청하고, 브라우저 캐시에 저장된 데이터가 있는 경우 네트워크 요청을 최소화할 수 있습니다. 아래는 예시 코드입니다.

class MyComponent extends React.Component {
  componentDidMount() {
    const cachedData = localStorage.getItem('cachedData');
    if (cachedData) {
      // 캐시된 데이터를 사용하여 작업
    } else {
      // 네트워크에서 데이터를 가져와서 캐시
      fetchDataFromServer().then(data => {
        localStorage.setItem('cachedData', JSON.stringify(data));
        // 데이터 사용
      });
    }
  }
}

componentWillUnmount를 이용한 캐시 초기화

componentWillUnmount 생명주기 메서드는 컴포넌트가 제거되기 직전에 호출됩니다. 이를 활용하여 컴포넌트가 제거될 때 캐시를 초기화할 수 있습니다.

class MyComponent extends React.Component {
  componentWillUnmount() {
    localStorage.removeItem('cachedData');
  }
}

위와 같이 생명주기 메서드를 활용하여 브라우저 캐시를 관리할 수 있습니다. 이는 애플리케이션의 성능을 향상시키고 사용자 경험을 향상시키는 데 도움이 될 수 있습니다.