리액트 localstorage 새로고침 시 초기화

Question

import React, { useState,useRef, useEffect } from "react"; import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; import interactionPlugin from "@fullcalendar/interaction"; import ModalBasic from "./Modal/ModalBasic"; import Post from "../Post"; import '@fullcalendar/common/main.css'; import '@fullcalendar/daygrid/main.css'; import './style.css' import LocalStorage from "./LocalStorage"; const Calendar = () => { const [modalOpen, setModalOpen] = useState(false); const showModal = () => { setModalOpen(true); }; const [data,setDate] = useState([]); const dataId = useRef(0); const onCreate = (title,date) => { const newItem = { title, date, id: dataId.current } dataId.current += 1; setDate([newItem , ...data]) console.log(data) } useEffect(()=>{ window.localStorage.setItem("event",JSON.stringify(data)) }, [data]) const event = JSON.parse(localStorage.getItem("event")) return(

{modalOpen && }

) } export default Calendar;import { useContext, useState } from 'react'; import ColorContext from './Color'; import Moment from 'moment' const Post = () => { const event = JSON.parse(localStorage.getItem("event")); const {state} = useContext(ColorContext); const formatDate = Moment().format('YYYY-MM-DD'); return (

{formatDate}

{event && event.map((it, idx)=>(

{it.title}

))}

) }위 첫번째 코드에서 localstorage에서 event로 데이터를 받아왔는데 새로고침을 두번하면 데이터가 초기화 되는 문제를 해결 못하고 있어서요..두번째 코드에서는 새로고침을 해도 데이터가 초기화 되지 않는데 그 차이를 잘 모르겠어서 질문 드립니다 ㅠㅠ 어떻게하면 첫번째 코드에서 데이터가 초기화 되지 않을까요 ㅠㅠ

Changsik Yoon · Answer

초기화면 setItem쪽이 문제인 거 같습니다.제 추측으로는,리액트가 개발 서버에서는 useEffect를 두 번 실행하게 되는데, (이유는 길어서... 구글링 해보세요!)첫 useEffect 실행 시, 비어있는 data를 로컬스토리지에 세팅해줘서 그런 거 같습니다.로컬 스토리지에 가셔서 'event' 키는 남아있는데 값만 없어졌는지 확인해보시고,빌드를 해보시고 빌드 서버에서도 초기화 되는지 확인 한 번 해보세요!

O-h-y-o · Answer

data의 초기값은 []입니다. 기존에 데이터가 로컬스토리지에 있더라도 빈 배열로 바뀌겠죠? data의 초기값을 로컬스토리지의 값으로 설정하거나, event를 반응형으로 만들면 될 것 같습니다.두번째에서는 모달이 열리기 전 로컬에 데이터를 저장하는 함수가 먼저 실행되고 그 데이터가 정상적으로 들어있기때문에 초기화가 되지 않는거구요.

덤엔더머 · Answer

useEffect에서 data 가 있는 경우에 실행 하는 것이 어떨까요? if(data) window.localStorage.setItem(&#34;event&#34;,JSON.stringify(data))

ryongryong · Answer

댓글 달아주셔서 감사합니다!! 참고해서 해결 했어요 :)

리액트 localstorage 새로고침 시 초기화

4개의 답변

#useeffect 목록