[React]이전글 다음글 구현

처음에는 서버에서 받아온 데이터의 길이의 해당 index의 id값으로 이전글 다음글을 불러오려고 했지만 데이터 리스트의 첫번째 index와 마지막 index 부분에서 오류가 발생하여 다른 방식으로 진행하였다.

axios로 데이터 상세 내역을 불러올때 이전글과 다음글의 axios도 같이 불러오는 형식으로 진행하였다.

이런 방식으로 이전글과 다음글의 axios를 불러오려면 데이터 리스트 목록을 불러올때 사용했던 정렬, 검색조건이 들어가야 하는 형식으로 백엔드에서 처리해주었다.

그래서 데이터 리스트 목록을 불러올때 사용했던 정렬, 검색조건을 useState에 저장해두어 이전글 다음글 불러올때 request에 넣어 axios요청을 보냈다.

🤔 데이터 리스트 목록 요청시 api

  //쿼리값
  const [reqData, setReqData] = useState(``);

  useEffect(() => {
    const getData = async () => {
      await axios({
        method: 'get',
        url: `${process.env.REACT_APP_API_URL}/notice/list?
size=${size}&page=${page}&${sort}&title=${categoryName}
&createDate=${searchItem}`,

      }).then((res) => {
        setItemList(res.data.content);
        setTotalPages(res.data.totalElements);
        setListLength(res.data.numberOfElements); 
        //이전글 다음글 aixos 요청시 사용될 것
        setReqData(`${sort}&title=${categoryName}
&lastModifiedDate=${searchItem}`);
      });
    };
    getData();
  }, [sort, searchItem, size, page, categoryName]);

😎 데이터 리스트 상세보기 api

데이터 리스트에서 중 하나를 클릭해서 데이터 리스트 상세내역으로 들어가면 네트워크상에서 현재 데이터 리스트 상세내역,이전글,다음글의 3개의 데이터가 들어온다.

//현재 데이터 리스트 상세내역 데이터
 const [data, setDate] = useState('' as any);
//이전글 데이터
  const [preData, setPreData] = useState('' as any);
//다음글 데이터
  const [nextData, setNextData] = useState('' as any);

  useEffect(() => {
    const getData = async () => {
      await axios({
        method: 'get',
        url: `${process.env.REACT_APP_API_URL}/notice/${itemId}`,

      }).then((res) => {
        setDate(res.data);
      });

      //이전글
      await axios({
        method: 'get',
        url: `${process.env.REACT_APP_API_URL}/notice/prev/${itemId}?
${reqData}`,

      }).then((res) => {
        setPreData(res.data);
      });

      // 다음글
      await axios({
        method: 'get',
        url: `${process.env.REACT_APP_API_URL}/notice/next/${itemId}?
${reqData}`,
      }).then((res) => {
        setNextData(res.data);
      });
    };
    getData();
  }, [itemId,  reqData]);

😎 브라우저상에 이전글 다음글 데이터 띄우기

            <S.Table>
              <tbody>
                <tr>
                  <td>
                    {preData === '' ? (
                      <S.NotPage2>이전글이 없습니다.</S.NotPage2>
                    ) : (
                      <div onClick={() => moveNoticepo(preData.id)}>
                        <S.FirstDiv>
                          <AiOutlineLeft size={15} />
                          <div>이전글</div>
                        </S.FirstDiv>
                        <S.NextTitle>{preData.title}</S.NextTitle>
                        <S.DateData>{registDate2(preData.lastModifiedDate)}</S.DateData>
                      </div>
                    )}
                  </td>
                  <td>
                    {nextData === '' ? (
                      <S.NotPage>다음글이 없습니다.</S.NotPage>
                    ) : (
                      <S.SecondDiv onClick={() => moveNoticepo(nextData.id)}>
                        <S.FirstDiv>
                          <div>다음글</div>
                          <AiOutlineRight size={15} />
                        </S.FirstDiv>
                        <S.NextTitle>{nextData.title}</S.NextTitle>
                        <S.DateData>{registDate2(nextData.lastModifiedDate)}</S.DateData>
                      </S.SecondDiv>
                    )}
                  </td>
                </tr>
              </tbody>
            </S.Table>

다음글 이전글 클릭시 페이지 이동

//페이지 이동시에도 데이터 리스트 목록을 불러올때 사용했던 목록에서
//사용했던 정렬, 검색조건을 전달해주어야 한다.
  const moveNoticepo = (item: any) => {
    navigate('/notice-po', {
      state: {
        itemId: item,
        data: itemList,
        reqData: reqData,
      },
    });
  };