bookmark 기능 구현 중...

import styled from 'styled-components';
import Button from '../atoms/Button';
import { useEffect, useState } from 'react';
import BookmarkHandle from './BookmarkHandle';

const Anchor = styled.a`
  line-height: 1;
`;

const Bookmark = () => {
  const dummyBookmark = [
    { name: 'naver', url: 'https://www.naver.com' },
    { name: 'google', url: 'https://www.google.com' },
  ];
  const [booksArr, setBookmarkArr] = useState(
    dummyBookmark
    // JSON.parse(localStorage.getItem('bookmark') || dummyBookmark)
    // [] 으로 하면 잘 되지만 새로고침하면 날아감
    // localStorage.getItem('bookmark') || 0 이나 []으로 하면 booksArr is not iterable
  );
  console.log(localStorage.getItem('bookmark') || []);
  const [isOpen, setIsOpen] = useState(false);
  let renderBookmark = [];

  useEffect(() => {
    renderBookmark = JSON.parse(localStorage.getItem('bookmark'));
  }, [booksArr]);
  return (
    <>
      {booksArr.length
        ? booksArr.map((book, i) => {
            return (
              <Button key={i} size="long" fontsize="middle">
                <Anchor href={book.url}>{book.name}</Anchor>
              </Button>
            );
          })
        : null}
      <BookmarkHandle setBookmarkArr={setBookmarkArr} booksArr={booksArr} />
    </>
  );
};

export default Bookmark;