페이지 간 이동하기
Last updated
Last updated
에서 배운 내용을 바탕으로 홈과 상세 페이지를 이동할 수 있도록 만들어봅시다.
홈에서 Link
컴포넌트를 활용해 상세로 이동하는 동작을 구현합니다. href
프로퍼티에 경로를 입력해주면 됩니다.
상세에서 useRouter
를 이용해 홈으로 이동하는 동작을 구현합니다. useRouter를 서버 컴포넌트에서 사용하려고 하면 다음과 같은 에러가 발생합니다.
Error: useRouter only works in Client Components. Add the "use client" directive at the top of the file to use it.
때문에 useRouter
를 사용하는 별도의 클라이언트 컴포넌트를 만들어 서버 컴포넌트에서 불러와 사용해야 합니다.
이제 만들어진 페이지에 약간의 스타일을 입혀보러 갑시다.
컴포넌트와 같은 파일을 어디 정의해야할지 고민이 되실지도 모르겠습니다. 하긴 하지만 정답은 없습니다. 이번 강의에서는 복잡해질 때마다 조금씩 프로젝트 구조를 정돈하면서 몇 가지 방법을 써볼 예정입니다. 우선은 라우팅 되는 페이지와 가까운 위치에 컴포넌트를 두는 방식을 써보겠습니다.