[React] 글 상세보기 후 이전 페이지 이동

글 상세보기 후 이전 버튼 클릭 시 이전 페이지로 이동

ArticleList

• 테이블 행을 누르면 해당 글 상세보기로 이동이 되는 구조
• 글 상세보기 시 페이징처리된 페이지 번호를 알수 없음
  -> 테이블 행 클릭 시 상세보기로 이동(navigate) + 페이지 번호(state) 넘김

  const handleRowClick = (articleNo) => {
        navigate(`/app/at/detailView/${articleNo}`,  { state: { page } });
    }
    

ArticleDetail

• 이전 버튼 클릭 시 리스트에서 받아온 해당 글이 있던 페이징의 page값을 다시 리스트로 넘겨주기

// 이전 버튼 클릭 시 이동 경로와 페이지 번호 넘겨주기
  const goToListPage = () => {
     navigate(`/app/at/index?page=${prevPage}`, { state: { page: prevPage } })
   }
    
 // 이전 버튼    
<button type="button" className="btn btn-secondary cancel" onClick={goToListPage}>이전</button>

ArticleList

• 상세보기 페이지에서 받은 페이지 번호를 받아서 setPage 처리

// 글 상세보기 후 이전 페이지 값 받아오기
 const location = useLocation();
 const [prevPage, setPrevPage] = useState(location.state?.page || null);
 
  useEffect(() => {

      const getArticleList = async (page) => {
            try {
                const response = await customAxios.get(`/api/app/at/index?page=${page}`);
                setArticles(response.data.content);
                setTotalElements(response.data.totalElements);
                setLimit(response.data.size);
                setPage(response.data.pageable.pageNumber + 1);
            } catch (e) {
                console.log(e);
            }
        }
		
        
        if (prevPage) {
        
          setPage(prevPage);
          // 이전 페이지로 이동한 후 prevPage 변수를 초기화하여 다시 실행되는 것을 방지(무한 루프 방지)
          setPrevPage(null); 
          
        } else {
          getArticleList(page);
        }
      }, [page, prevPage]);