logsStorage를 만들었으니 LogContext에서 사용해주겠습니다. 이제 logs 상태의 초깃값도 지우고, 빈 배열로 변경해주세요.

    contexts/LogContext.js

    import React, {useEffect, useRef} from 'react';
    import {createContext, useState} from 'react';
    import {v4 as uuidv4} from 'uuid';
    import logsStorage from '../storages/logsStorage';
    
    const LogContext = createContext();
    
    export function LogContextProvider({children}) {
      const initialLogsRef = useRef(null);
      const [logs, setLogs] = useState([]);
    
      const onCreate = ({title, body, date}) => {
        (...)
      };
    
      (...)
    
      useEffect(() => {
        // useEffect 내에서 async 함수를 만들고 바로 호출
        // IIFE 패턴
        (async () => {
          const savedLogs = await logsStorage.get();
          if (savedLogs) {
            initialLogsRef.current = savedLogs;
            setLogs(savedLogs);
          }
        })();
      }, []);
    
      useEffect(() => {
        if (logs === initialLogsRef.current) {
          return;
        }
        logsStorage.set(logs);
      }, [logs]);
    
      return (
        <LogContext.Provider value={{logs, onCreate, onModify, onRemove}}>
          {children}
        </LogContext.Provider>
      );
    }
    
    export default LogContext;
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.