[React] 페이징 뒤로가기 구현

기존에 react의 spa를 이용해서 페이지를 구현하던터라 페이징을 할 시에는 데이터를 새로 가져와서 렌더링이 되어 뒤로가기를 하면 이전의 다른 페이지가 렌더링 될 수 밖에 없던 상태였다.

내가 개발 중인 시스템은 뒤로가기를 하면 이전 번호의 페이지를 보여주도록 구현해야해서 조금 손을 봐야했다.

원래는 페이지 번호를 누르거나 이전 페이지 또는 다음 페이지 키를 누르면 데이터만 다시 fetch해와서 재렌더링하는 식이었다.
이렇게하면 이전 페이지 번호로 뒤로가기를 구현하는 것이 불가능하기 때문에,
다른 페이지 번호를 누를 때 데이터를 가져오는 것이 아니라 라우팅해서 새롭게 컴포넌트를 렌더링하는 식으로 구현할 수 있었다.

그러기 위해선 밑과 같이 항상 최상위 컴포넌트는 url로부터 페이지 번호 파라미터를 받아와야한다.
그리고 이를 라우팅을 하는 코드가 담겨있는 컴포넌트에 전달한다.
추가로 뒤로가기 구현을 위해 현재 컴포넌트의 history 객체도 전달하도록 한다.

const Body = (props) => {
  const { pageNum } = props.match.params;

  const [totalPage, setTotalpage] = useState(0);
  const [problemData, setProblemData] = useState([]);

  const fetchProblems = async () => {
    const pos = (pageNum - 1) * size;
    try {
      // fetch로 데이터 받아오기
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchProblems(pageNum);
  }, []);

  return <div>
        <div>
        <ProblemList problems={problemData}/>
        </div>
        <StyledContainer>
          <PagenumberList curPage={pageNum} totalPage={totalPage} history={props.history}/>
        </StyledContainer>
        </div>;
};

export default Body;

이렇게만 구현하면 내가 예상했던 대로 동작할 거라 기대했지만, 그렇지 않았다.

url은 변경이 잘 되고 컴포넌트 자체도 수행이 잘 되는 것을 확인했지만 useEffect 훅이 무시되어 데이터의 변경이 일어나지 않았고 때문에 가상 DOM이 변화를 감지하지 못해
리렌더링이 일어나지 않았다.

useEffect의 두 번째 파라미터를 보면 빈 배열임을 확인할 수 있다.
이 파라미터는 optional한데, useEffect 사용의 최적화를 위해 매번 수행되는 것이 아니라 특정 인수의 변화가 일어났을 때만 수행되길 원한다면 그 특정 인수를 배열에 넣을 수 있다.
지금 나는 빈 배열을 넣었는데 이는 컴포넌트가 마운트 될 때 즉 DOM에 올려질 때만 수행하겠다는 얘기다.

때문에 내가 url을 전달해서 컴포넌트를 재호출해도 이미 마운트된 상태이기 때문에 변화가 없는 것이었다.

이를 해결할 수 있는 방법은

1. props변화에 따라 useEffect 실행

  useEffect(() => {
    fetchProblems(pageNum);
  }, [props]);

2. 렌더링 후 항상 실행

  useEffect(() => {
    fetchProblems(pageNum);
  });

로 두 가지 방법이 있다.
2번처럼 간단하게 해결할 수 있지만, 페이징할 때 리렌더링 되야하는 시점은 props의 페이지 번호 파라미터가 변경될 때 밖에 없기 때문에 1번 방법이 더 괜찮은 것 같다. 👍