* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
2편: 페이지 이동 - 현재 글
이제 간단한 Next.js 애플리케이션을 만들고 동작시키는 법을 알았습니다. 이 간단한 애플리케이션은 하나의 페이지를 가지고 있지만 원하는 만큼 페이지를 추가할 수 있습니다. 예를 들어 pages/about.js에 다음 내용을 추가하여 "About" 페이지를 만들 수 있습니다:
그러면 http://localhost:3000/about를 통해 About 페이지에 접근할 수 있습니다.
이제 이 페이지들을 연결시켜야 합니다. 이를 위해 HTML의 "a" 태그를 사용할 수 있습니다. 그러나 a 태그를 사용하면 클라이언트 사이드를 통해 이동하지 않습니다. 원하지 않게도 서버 사이드를 통해 페이지가 이동합니다.
클라이언트 사이드 이동을 지원하기 위해 next/link를 통해 export된Next.js의 Link API를 사용해야 합니다.
이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 이전 편을 수행하거나 다음의 샘플 애플리케이션을 다운받아주세요:
아래의 명령어로 실행시킬 수 있습니다:
이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.
두 개의 페이지를 연결하기 위해 next/link를 사용할 예정입니다.
pages/index.js에 다음과 같은 코드를 추가해주세요.
next/link를 Link로 import하여 다음과 같이 사용하였습니다:
http://localhost:3000에 방문해주세요.
그런 다음 "About Page" 링크를 클릭하면 "About" 페이지로 이동합니다.
이것은 클라이언트 사이드 이동입니다. 이 동작은 서버 요청없이 브라우저 안에서 수행됩니다.
브라우저의 네트워크 상태 검사 툴에서 확인할 수 있습니다.
자 지금 간단한 과제가 있습니다:
- http://localhost:3000에 방문하세요.
- 그런 다음 "About Page"를 클릭하세요
- 브라우저의 뒤로가기 버튼을 클릭하세요.
뒤로가기 버튼을 클릭했을 때 어떤 일이 일어나는지 가장 잘 설명한 것은 무엇인가요?
- 뒤로가기 버튼이 동작하지 않았다.
- 뒤로가기 버튼이 브라우저 콘솔에 에러를 발생시켰다.
- 클라이언트 사이드를 통해 인덱스(home) 페이지로 이동했다.
- "뒤로가기 버튼을 지원하기 위해 'next/back'를 import하세요"라는 알럿창이 띄워졌다
뒤로가기 버튼을 클릭하면 클라이언트를 통해 인덱스 페이지로 이동합니다. next/link는 모든 location.history를 처리합니다.
클라이언트 사이드 라우팅에 대한 코드를 단 한 줄도 작성할 필요가 없습니다.
간단하게 페이지들을 연결하세요. 그래도 잘 동작합니다!
대부분의 경우 링크에 스타일을 지정하고자 합니다. 스타일을 지정하는 방법입니다:
위와 같은 코드를 추가하면 스타일이 올바르게 적용된 것을 볼 수 있습니다.
위의 코드 대신 아래의 코드처럼 작성하는면 어떨까요?
위의 코드처럼 변경했을 때 어떤 일이 일어났나요?
- 원하던 스타일이 올바르게 적용되었다.
- 링크에 어떤 스타일도 적용되지 않았다.
- 전체 페이지가 다시 로딩된 후에 스타일이 적용되었다.
- 스타일이 적용되었지만 콘솔에 에러가 나타났다.
사실 next/link에 있는 스타일 prop는 아무런 효과가 없습니다. 왜냐하면 next/link는 단지 "href"와 다른 라우팅 관련 props만 받아들이는 래퍼 컴포넌트이기 때문입니다. 스타일을 적용해야 한다면 하위에 있는 컴포넌트에 지정해야 합니다.
링크의 앵커 대신에 "button"을 사용해봅시다. 다음과 같이 코드를 수정해야 합니다:
인덱스 페이지의 버튼을 클릭하면 어떤 일이 일어날까요?
- 아무 일도 일어나지 않는다
- "링크 안에 버튼이 올 수 없습니다"라는 에러가 발생한다
- 페이지가 다시 로딩된다
- about 페이지로 이동한다
버튼과 같이 커스텀 React 컴포넌트나 div 등을 Link 안에 배치할 수 있습니다.
Link 안에 있는 컴포넌트들의 유일한 요구 사항은 onClick prop를 받을 수 있어야 한다는 것입니다.
이번 편에서는 next/link의 기본적인 사용법을 살펴보았습니다. Link를 사용하기 위해 몇 가지 재밌는 방법들이 있습니다. 다음 편들에서 배울 예정입니다.
그동안 Next.js Routing documentation를 살펴보세요. 유용합니다.
#트레바리 #개발자 #안드로이드 #앱개발 #Next.js #백엔드 #인사이트 #경험공유
관련 스택
가입하기
