하루에 한 번만 데이터 바뀌도록 구현하기

1. 처음에 찾아봤던건 usequery의 staletime과 cachetime을 설정해주기

근데 이건 새로고침을 하면 데이터가 바뀌었던 듯

 

2. 그래서 찾아진게 로컬 스토리지를 사용하는거였다

하루에 한 번 바뀌어야하기 때문에 day를 설정해서 접속한 당일의 day와 다르면 데이터를 불러온다

const [books, setBooks] = useState(() => {
    const localData = localStorage.getItem("quotelist");
    return localData ? JSON.parse(localData) : [];
});

useEffect(() => {
    const selectQuote = async () => {
        if (!books || localStorage.getItem("day").toString() !== new Date().getDate().toString()) {
            if (QuoteQuery.data) {
                const quotes = QuoteQuery.data.quotes
                const selectedBooks = []
                const isbnSet = new Set()
                const bookColor = ["#97A4E8", "#4659A9", "#6F61C6", "#2C2C60"]

                for (const quote of quotes) {
                    if (selectedBooks.length >= 4) {
                        break;
                    }
                    if (!isbnSet.has(quote.isbn)) {
                        const bookInfo = await fetchBookInfo(quote.isbn)
                        selectedBooks.push({
                            ...quote,
                            ...bookInfo,
                            isbn13: bookInfo.isbn,
                            bookColor: bookColor[selectedBooks.length]
                        });
                        isbnSet.add(quote.isbn)
                    }
                }
                console.log("selectedBook ", selectedBooks)
                setBooks(selectedBooks)
            }
        }
    };
    selectQuote()
}, [QuoteQuery.data])

useEffect(() => {
    let day = new Date().getDate();
    localStorage.setItem("day", day)
    localStorage.setItem("quotelist", JSON.stringify(books));
}, [books]);

 

참고 자료

https://songsong.dev/entry/%EC%98%A4%EB%8A%98-%ED%95%98%EB%A3%A8-%EB%B3%B4%EC%A7%80-%EC%95%8A%EA%B8%B0-%ED%8C%9D%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0

오늘 하루 보지 않기 팝업 만들기

https://velog.io/@wjddma1202/React-localStorage%EC%97%90-%EC%A0%80%EC%9E%A5%EB%90%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-useState%EC%97%90-%EA%B0%80%EC%A0%B8%EC%99%80%EB%B3%B4%EC%9E%90

[React] localStorage에 저장된 데이터를 useState 초깃값으로 가져와보자!