useState 전달과 값의 변화

-> Main.js

const [bookList, setBookList] = useState([]);

  return (
    <Background>
      {!isBooksLoading && (
        <BookList>
          {showCurrentBooks(bookList).map(el => (
            <BookItem el={el} key={el.id} />
          ))}
        </BookList>
      )}
      <Pagination
        booksPerPage={booksPerPage}
        totalBooks={bookList.length}
        setCurrentPage={setCurrentPage}
        setBookList={setBookList} // 상태값을 그대로 내려준다.
      />
    </Background>
  );

-> Pagination.js

const fetchData = async () => {
    const data = await fetch('/data/bookData.json'); // 목데이터
    const res = await data.json();
    setBookList(res);
  };

  useEffect(() => {
    (async () => {
      setIsBooksLoading(true);
      await fetchData();
      setIsBooksLoading(false);
    })();
  }, []);

 return (
    <PageUl>
      {pageNumbers.map(num => (
        <PageLi key={num}>
          <PageSpan
            onClick={
              fetchData // 여기에서 상태값을 변화시켜준다. 그러면 부모에서의 상태값이 변화한다 !!
            }
          >
            {num}
          </PageSpan>
        </PageLi>
      ))}
    </PageUl>
  );