Next.js 튜토리얼 2편: 페이지 이동
React 서버사이드 렌더링 프레임워크 Next.js Tutorial
* 이 글은 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로 이동하여 애플리케이션에 접근할 수 있습니다.
Link 사용하기
두 개의 페이지를 연결하기 위해 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를 처리합니다.
클라이언트 사이드 라우팅에 대한 코드를 단 한 줄도 작성할 필요가 없습니다.
간단하게 페이지들을 연결하세요. 그래도 잘 동작합니다!
Link 스타일링하기
대부분의 경우 링크에 스타일을 지정하고자 합니다. 스타일을 지정하는 방법입니다:
위와 같은 코드를 추가하면 스타일이 올바르게 적용된 것을 볼 수 있습니다.
위의 코드 대신 아래의 코드처럼 작성하는면 어떨까요?
위의 코드처럼 변경했을 때 어떤 일이 일어났나요?
- 원하던 스타일이 올바르게 적용되었다.
- 링크에 어떤 스타일도 적용되지 않았다.
- 전체 페이지가 다시 로딩된 후에 스타일이 적용되었다.
- 스타일이 적용되었지만 콘솔에 에러가 나타났다.
Link는 래퍼 컴포넌트입니다
사실 next/link에 있는 스타일 prop는 아무런 효과가 없습니다. 왜냐하면 next/link는 단지 "href"와 다른 라우팅 관련 props만 받아들이는 래퍼 컴포넌트이기 때문입니다. 스타일을 적용해야 한다면 하위에 있는 컴포넌트에 지정해야 합니다.
Button이 있는 Link
링크의 앵커 대신에 "button"을 사용해봅시다. 다음과 같이 코드를 수정해야 합니다:
인덱스 페이지의 버튼을 클릭하면 어떤 일이 일어날까요?
- 아무 일도 일어나지 않는다
- "링크 안에 버튼이 올 수 없습니다"라는 에러가 발생한다
- 페이지가 다시 로딩된다
- about 페이지로 이동한다
Link는 어떤 것과도 동작합니다
버튼과 같이 커스텀 React 컴포넌트나 div 등을 Link 안에 배치할 수 있습니다.
Link 안에 있는 컴포넌트들의 유일한 요구 사항은 onClick prop를 받을 수 있어야 한다는 것입니다.
Link는 간단하지만 강력합니다
이번 편에서는 next/link의 기본적인 사용법을 살펴보았습니다. Link를 사용하기 위해 몇 가지 재밌는 방법들이 있습니다. 다음 편들에서 배울 예정입니다.
그동안 Next.js Routing documentation를 살펴보세요. 유용합니다.
#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역
