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 (); export function ({children}) { const initialLogsRef = useRef(null); const [logs, setLogs] ([]); const ({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;