Why does React re-rendering keep happening?

Question

import React, { useEffect, useState } from "react";
import { Link, withRouter } from "react-router-dom";
import { useDispatch } from 'react-redux';
import { boardlist, boardcount } from "../../../_actions/board_action"
import "./Sections/LandingPage.css"

function LandingPage(props) {
  const dispatch = useDispatch();
  
  const [limit, setlimit] = useState(5)
  const [posts, setposts] = useState([]);
  const [all_page, setall_page] = useState([])
  const [page, setpage] = useState(1)

  const changePage = (post) => {
    setpage(post)
    sessionStorage.setItem("page", post)
  }

  const setPage= () => {
    if (sessionStorage.page) {
      setpage(Number(sessionStorage.page))
      return Number(sessionStorage.page)
    }
    setpage(1)
    return 1
  }

  useEffect(() => {
    async function fetchData() {
      let body = {
        limit: limit,
        page: page,
      }
      const res_count = await dispatch(boardcount())
      const response = await dispatch(boardlist(body))
      setposts(response.payload);
      let page_arr = []
      for (let i = 1; i <= Math.ceil(res_count.payload / limit); i++) {
        page_arr.push(i)
      }
      setall_page(page_arr)
    }
    fetchData();
    setPage();
  }, [])
  return (
    <>
      <div className="landingpage">
        <div className="post_title">
          <Link to="/write">글쓰기</Link>
        </div>
        <div className="post_content">content</div>
        <div className="post_page">
          <div className="List">
            <div className="list_grid list_tit">
              <div>제목</div>
              <div>조회수</div>
              <div className="acenter">날짜</div>
            </div>
            {posts ? posts.map((post, key) => {
              return (
                <div className="list_grid list_data" key={key}>
                  <div> {post.title} </div>
                  <div> {post.readCount} </div>
                  <div className="acenter"> {post.createdAt.slice(0, 10)}</div>
                </div>
              )
            })
              : null}
            <div className="paging_div">              
              <div> </div>              
              <div>                
                <ul>                  
                  {all_page ? all_page.map(num => {
                    return (
                      num === page ? <li key={num} className="page_num"> <b> {num} </b> </li>                        
                        : <li key={num} className="page_num" onClick={changePage(num)}> {num} </li>                      
                    )
                  }) : null}                  
                </ul>                
              </div>              
              <div> </div>              
            </div>            
          </div>          
        </div>
      </div>
    </>
  );
}

export default withRouter(LandingPage);

There is an error that keeps re-rendering, but is there a way to solve it?

I think the setting page is wrong. Is there a way to solve it?

setall_page((old) => [...old,page_arr])

I changed it as above, and the entire array enters all_page, so the map does not work in the code below.

<div className="paging_div">
  <div> </div>
  <div>
    <ul>
      {all_page ? all_page.map(num => {
      return (
      num === page ? <li key={num} className="page_num"> <b> {num} </b> </li>
      : <li key={num} className="page_num" onClick={changePage(num)}> {num} </li>
      )
      }) : null}
    </ul>
  </div>
  <div> </div>
</div>