useParams와 useLocation을 이용한 페이지 이동 (2)

page를 이동할 때 쓰는 next 혹은 previous 버튼 또한 리액트 훅을 사용하여 구현할 수 있다.

url의 id 값이 nex를 누를 때는 +1이, previous를 누르면 -1이 되면 된다.

 

<button onClick={goToPrevious}>Previous</button>
<button onClick={goToNext}>Next</button>

const goToPrevious = () => {
    navigate(`/monsters/detail/${params.id - 1}`);
  };

  const goToNext = () => {
    navigate(`/monsters/detail/${params.id + 1}`);
  };

하지만 단순히 이런 함수를 만들어도 제대로 동작하지 않는다.

 

 

이유는 params.id 에 저장되는 값이 string 이기 때문이다.

문자열 - 1은 연산이 되지만 + 1은 되지 않는 것 !

 

const goToPrevious = () => {
    navigate(`/monsters/detail/${Number(params.id) - 1}`);
  };

  const goToNext = () => {
    navigate(`/monsters/detail/${Number(params.id) + 1}`);
  };

 

url이 변화한 것은 볼 수 있지만 아직 화면은 변하지 않는다.

이는 useEffect의 의존성 배열을 쓰면 화면 변화를 능동적으로 다룰 수 있다!

 

useEffect의 의존성 배열 안에 있는 값은 해당 값이 변하면 sideEffect를 실행시켜 준다.

path parameter 값을 의존성 배열에 넣어주면 값이 변할때마다 새로 렌더가 가능한 것이다.

 

useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
      .then((res) => res.json())
      .then((data) => setMonster(data));
  }, [params.id]);

 

 

짜란 그럼 url이 변경될 때 정상적으로 화면이 새로 렌더되는 것을 볼 수 있다!

 

 

---