Next.js 튜토리얼 7편: 데이터 가져오기
React 서버사이드 렌더링 프레임워크 Next.js Tutorial
* 이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
목차
7편: 데이터 가져오기 - 현재 글
개요
꽤 그럴듯한 Next.js 애플리케이션을 만드는 방법과 Next.js 라우팅 API의 모든 장점을 배웠습니다.
대부분의 경우 데이터 소스에서 원격으로 데이터를 가져와야 합니다. Next.js는 페이지에 데이터를 가져오기 위한 표준 API를 제공합니다. getInitialProps라 불리는 비동기 함수를 사용하여 구현할 것입니다.
주어진 페이지에 원격 데이터 소스를 통해 데이터를 가져오고 원하는 페이지에 props을 통해 전달할 수 있습니다. 서버와 클라이언트 둘 다 동작하도록 getInitialProps를 작성할 수 있습니다. 그래서 Next.js는 클라이언트와 서버에서 모두 사용할 수 있습니다.
이번 편에서는 getInitialProps를 사용하여 공개된 TVmaze API에서 가져온 데이터로 배트맨 TV 쇼에 대한 정보를 보여주는 애플리케이션을 구현할 예정입니다.
설치
이번 장에서는 간단한 Next.js 애플리케이션이 필요합니다. 다음의 샘플 애플리케이션을 다운받아주세요:
아래의 명령어로 실행시킬 수 있습니다:
이제 http://localhost:3000로 이동하여 애플리케이션에 접근할 수 있습니다.
배트맨 쇼 데이터 가져오기
데모 애플리케이션 내의 home 페이지에 블로그 포스트 목록이 있습니다. 배트맨 TV 쇼 목록을 표시할 것입니다.
쇼의 데이터들을 하드코딩하는 대신에 원격 서버에서 그 정보를 가져옵시다.
여기서는 TV 쇼를 가져오기 위해 TVMaze API를 사용합니다.
TV 쇼 정보를 검색하는 API 입니다.
먼저 isomorphic-unfetch를 설치해야 합니다. 데이터를 가져올 때 사용할 라이브러리입니다. 브라우저 fetch API 구현을 간단히 할 수 있도록 만들어진 것이지만 클라이언트와 서버 환경에서 모두 동작합니다.
npm install --save isomorphic-unfetch
pages/index.js를 다음과 같이 변경해주세요:
위의 페이지에 있는 모든 내용은 아래에 표시된 Index.getInitialProps를 제외하고는 익숙할 것입니다:
애플리케이션의 어떤 페이지에든 추가할 수 있는 정적 비동기 함수입니다. 이것을 사용하여 데이터를 가져오고 가져온 데이터를 props를 통해 페이지로 보낼 수 있습니다.
보다시피 배트맨 TV 쇼 데이터를 가져오고 'shows' props를 통해 페이지로 전달합니다.
위에서 보았던 getInitialProps 함수에서 가져온 데이터 숫자를 콘솔에 출력합니다.
이제 브라우저 콘솔과 서버 콘솔을 살펴봅시다. 그리고 페이지를 새로고침 해주세요.
페이지를 새로고침 한 후 출력되는 메시지는 어디에서 보였나요?
- 서버 콘솔
- 브라우저 콘솔
- 둘 다
- 어떤 콘솔에도 출력되지 않았다
서버에서만 출력됩니다
이 경우 메시지는 서버에서만 출력됩니다.
이는 서버에서 페이지가 랜더링되기 때문입니다.
이미 데이터를 가지고 있어 클라이언트에서 다시 정보를 가져올 필요가 없습니다.
post 페이지 구현하기
TV 쇼에 대한 자세한 정보를 보여주는 "/post" 페이지를 구현해봅시다.
먼저 server.js를 열고 /p/:id 라우트를 다음과 같이 바꿔주세요.
위처럼 바꾼 코드를 적용하기 위해 애플리케이션을 재실행시켜주세요.
이전에는 title 쿼리 파라미터를 페이지에 매핑했습니다. 이제 id로 이름을 바꿔야합니다.
다음과 같은 내용으로 pages/post.js를 변경해주세요.
페이지의 getInitialProps을 살펴봅시다:
여기에서 함수의 첫 번째 파라미터는 context 객체입니다. 정보를 가져올 때 사용할 수 있는 쿼리 필드를 가지고 있습니다.
예제에서 쿼리 파라미터로부터 보여지는 ID를 선택하고 TVMaze API로부터 데이터를 가져옵니다.
이 getInitialProps 함수에서 표시할 제목을 출력하는 console.log를 추가했습니다. 이제 어디에서 출력되는지 볼 수 있습니다.
서버와 클라이언트의 콘솔를 둘 다 열어주세요.
그 다음 홈페이지 http://localhost:3000로 이동하여 배트맨 쇼 제목을 클릭하세요.
위에서 애기했던 console.log 메시지가 보여지는 장소는 어디인가요?
- 서버 콘솔
- 브라우저 콘솔
- 콘솔 둘 다
- 아무 콘솔에서도 출력되지 않는다
클라이언트 사이드에서 데이터 가져오기
브라우저 콘솔에서 메시지를 볼 수 있습니다.
클라이언트 사이드를 통해 포스트 페이지에 이동했기 때문입니다. 그런 다음 클라이언트 사이드로부터 데이터를 가져오는 것은 가장 좋은 방법입니다.
예를 들어 http://localhost:3000/p/975에 직접 이동한다면 클라이언트가 아닌 서버에서 메시지가 출력되는 것을 볼 수 있습니다.
마무리
데이터를 가져오고 서버 사이드에서 렌더링하도록 만드는 Next.js의 가장 중요한 기능 중 하나를 배웠습니다.
대부분의 유스 케이스에서 충분히 사용할 수 있는 getInitialProps의 기본을 배웠습니다. 더 많은 것을 배우고 싶다면 Next.js의 문서 중 data fetching 문서를 참고할 수 있습니다.
#React #리액트 #Zeit #Next.js #SSR #JavaScript #자바스크립트 #프레임워크 #framework #가이드 #튜토리얼 #한글 #번역
