Next.js는 알아서 import해주기 때문에 import React from 'react';를 적을 필요가 없다.
영상에서는 src/pages에 Details.js를 만들어서 http://localhost:3000/details에 접속하면 Details 페이지가 렌더링되었으나 내가 시도해본 결과로는 404 페이지가 렌더링되었다.
평소에 사용하던 방식은 src/pages/details로 details라는 폴더를 만든 다음 폴더 내부에 index.js를 생성하여 export default function xx() { // ... }으로 http://localhost:3000/details에 접속했을 때 나타나는 페이지를 작성했다.
> Details.js를 src/pages/details/index.js에 작성했다.
동적 라우팅에서 URL 매개 변수를 읽는 방법
크롬 개발자도구의 콘솔을 보면 router.query로 받아지는 객체에 vehicle, person이라는 속성값으로 매개변수가 받아지는 것을 볼 수 있다.
이렇게 받아진 매개변수는 아래와 같이 사용할 수 있다.
이외에도 다른 파라미터들을 받아오고 싶을 때가 있다. 아래 url처럼 파라미터를 요청하면 router.query의 객체 내에 받아진다.
동적 라우팅 : Link 컴포넌트의 href는 페이지의 경로입니다. as는 브라우저 URL에 보여질 URL입니다. LInk를 사용하면서 as 와 href에 대해서 둘중 하나만 적어도 되는 줄 알았는데 이번에 검색하면서 새로 알게 되었다. 둘다 적어줘야 하고 실제 경로를 href에 적는 것이다.
Link를 이용해서 목록을 만들기
# 2
Data Fetching with getInitialProps
먼저, useEffect에서 async, fetch를 이용하여 데이터를 받아오는 방식
이처럼 미리 만들어 놓은 서버에서 vehicles 목록을 await fetch로 json 객체가 받아지면 List({ownersList})로 매개변수 ownerList로 전달받는다.
두번째는 getInitialProps로 받아오는 방식
await fetch를 사용하여 받아오는 것은 같으나 useEffect를 사용하는 것이 아니라 getInitialProps를 사용하였다. 여기서 받아지는 {ownersList: ownersList}는 List({ownersList})의 매개변수 ownersLIst에 전달받아져서 사용하는 것은 동일하다.
api를 통해 받아올 때 url을 세부적으로 설정하여 데이터를 받아오는 방법
ownerName에 Bruno%20Antunes를 전달하면 2개의 데이터가 전달된다.
이와 같이 Car = vehicle를 전달하고 Bruno%20Antunes를 전달하면 하나의 데이터만 받아진다.
useEffect를 통해서 데이터를 받아오기
서버에서 3초 후에 데이터를 받아오도록 설정해놓은다음 owners[0]이 null인 동안(페이지가 렌더링되는 동안) Loading... 을 출력시킬 수도 있다.
