4장에서 AsyncStorage를 사용한 것과는 조금 다른데요. 우선 딱 한 번만 호출되는 첫 번째 useEffect 내부에서 IIFE 패턴을 사용해 async 함수를 만들어 바로 호출해줬습니다. IIFE 패턴이 보기 복잡하면 함수를 선언하고 그다음 라인에서 호출해 사용해도 무방합니다. 다음 코드는 IIFE를 사용하지 않는 코드의 예시입니다.

useEffect(() => {
  const save = async () => {
    const savedLogs = await logsStorage.get();
    if (savedLogs) {
      initialLogsRef.current = savedLogs;
      setLogs(savedLogs);
    }
  }
  save();
}, []);

두 번째 useEffect에서는 logs 배열이 바뀔 때마다 logsStorage에 저장하도록 만들었습니다. 앱을 켰을 때 데이터가 있다면 데이터를 불러와 setLogs를 호출하게 되는데, 불러오는 과정에서 호출될 때도 두 번째 useEffect가 실행되기 때문에 실제로는 데이터에 변경이 없는데도 한 번 더 저장하게 됩니다. 이를 방지하기 위해 불러온 초기 데이터를 useRef로 기억하도록 만들었습니다. 이렇게 하면 불필요한 저장을 하지 않아 앱을 가동할 때 사용하는 리소스를 아낄 수 있죠.