[RIOT-APP 트러블슈팅] 동적 페이지 생성

       동적 라우팅 구현 이슈 

동적 라우팅을 구현할 때 URL 파라미터를 받아서 해당 파라미터에 맞는 페이지를 동적으로 렌더링하고자 했으나,

params가 제대로 동작하지 않아 문제가 발생했다.

 

---

       해결 과정 

처음에는 params.id가 undefined로 출력되는 문제를 겪었고, 이를 해결하기 위해 여러 가지 방법을 시도했다.

폴더 구조나 파일 구성, 링크 설정 등에서 문제가 있을 수 있기 때문에 하나씩 차근차근 점검했다.

 

우선 Next.js에서 동적 라우팅을 사용하려면 [id]와 같은 폴더 이름을 사용해야 한다는 점을 다시 확인하고, 이 구조로 맞게 설정했는지 다시 보니 문제가 없었다.

그 다음 파일 구성을 계속 살펴봤는데, 동적 페이지를 구현하기 위해 [id] 폴더를 만든 후, 해당 폴더에 파일을 생성하고 링크를 설정했지만, 링크 설정에서 상위 폴더의 이름을 빼먹는 실수를 했다.....

 

링크를 <Link href={/${page}/${champion.id}} />와 같이 수정하였고, 이때 page를 동적으로 받아 처리할 수 있게 했다.

페이지 내에서 champions 페이지와 rotation 페이지에서 공통으로 사용되는 디테일 페이지를 동적으로 처리하려면, 각 페이지에서 링크를 클릭할 때 어떤 페이지로 이동하는지 확인할 수 있도록 추가적인 정보를 링크에 포함시켜야 했기 때문이다.

 

완성된 코드는 이러하다.

<카드 컴포넌트>

    <Link href={`/${page}/${champion.id}`}> //rotation페이지에서 가는 것인지, champion에서 가는 페이지인지 확인하기 위한 용도
      <div>
        <Image
          src={loadingImg(champion.id)}
          alt={champion.name}
          width={300}
          height={200}
        />
        <div>{champion.name}</div>
        <div>{champion.title}</div>
      </div>
    </Link>

이런식으로 컴포넌트에서 props로 어떤 페이지인지 받을 수 있게 해 나누어 주었다.

rotation 페이지에서 디테일 페이지로 넘어가면 rotation/detail로 가고,

champion 페이지에서 디테일 페이지로 넘어가면 champion/detail로 가도록 설정되었다.

 

---

항상 폴더와 파일 구조, 링크 설정을 꼼꼼히 점검하면서 작업을 해야겠다.

실수로 인한 문제는 의외로 간단한 부분에서 발생하는 경우가 대부분인 것 같다.

처음부터 차근차근 살펴보는 습관을 길러야겠다!