Next.js - 데이터 가져오기 (Data Fetching)

Next.js에서 데이터를 가져와 컴포넌트에 props로 적용해주자. Next.js는 페이지에 데이터를 가져오기 위한 표준 API를 제공하는데, 바로 getInitialProps라고 불리는 비동기 함수를 사용한 구현이다.

 

데이터를 어디서 가져와야 할텐데, JSONPlaceholder에서 유저정보를 가져오는 방식으로 하도록 하겠다.

 

먼저 axios를 설치하고, /pages/users.js 파일을 만들어 다음과 같이 컴포넌트를 작성해준다.

 

import Layout from "../components/Layout";
import axios from "axios";

const Users = ({ users }) => (
  <Layout>
    <h1>Users page</h1>
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name}: {user.email}
        </li>
      ))}
    </ul>
  </Layout>
);

Users.getInitialProps = async () => {
  const { data: users } = await axios.get(
    "https://jsonplaceholder.typicode.com/users"
  );
  console.log("data loaded");
  return { users };
};

export default Users;

 

이후에 localhost:3000/users 페이지에 들어가보면 다음과 같이 잘 뜨는 것을 볼 수 있다.

 

그러나 보면 위에서 띄운 콘솔 로그는 브라우저가 아닌 node에서 출력된다. 이는 페이지가 서버에서 렌더링되기 때문이다.

 

이제 각 유저 정보를 볼 수 있는 페이지를 만들어보자. 먼저 위에서 만들었던 users.js 파일을 /pages/users/index.js 파일로 바꿔준다 (디렉터리와 이름을 바꿔준다). 그 후. /pages/users/[id].js 파일을 만들어 동적 라우팅을 해주자.

 

먼저 /pages/users/index.js 파일에 다음과 같이 각 유저에 대한 링크를 넣어준다.

 

...

const Users = ({ users }) => (
  <Layout>
    <h1>Users page</h1>
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          <Link href={`/users/${user.id}`}>
            <a>{user.name}: {user.email}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
);

...

 

그 후, 같은 디렉터리의 [id].js 파일을 다음과 같이 작성해준다.

 

import Layout from "../../components/Layout";
import axios from "axios";

const User = ({ user }) => (
  <Layout>
    <h1>{user.name}</h1>
    <p>username: {user.username}</p>
    <p>email: {user.email}</p>
    <p>website: {user.website}</p>
  </Layout>
);

User.getInitialProps = async (context) => {
  const { id } = context.query;
  const { data: user } = await axios.get(
    `https://jsonplaceholder.typicode.com/users/${id}`
  );
  return { user };
};

export default User;

 

이후에 localhost:3000/users 에 들어가면 다음과 같이 페이지가 잘 뜨는 것을 확인할 수 있으며,

 

클릭하여 들어가면 유저 정보가 잘 뜨는 것을 확인할 수 있다.

 

보면 함수의 인자로 아무 것도 넣지 않던 index.js와 달리 [id].js 의 getInitialProps 에 들어가는 함수에는 context가 인자로 들어간다. context에는 여러 정보들이 들어있는 객체이다.

 

User.getInitialProps = async (context) => {
  const { id } = context.query;
  const { data: user } = await axios.get(
    `https://jsonplaceholder.typicode.com/users/${id}`
  );
  return { user };
};

 

context를 한번 출력해보면,

 

{
  ...
  pathname: '/users/[id]',
  query: { id: '8' },
  asPath: '/users/8',
  ...
}

 

굉장히 많은 객체 정보가 담겨있는 것을 확인할 수 있는데, 이 중 query를 사용하여 id값을 추출하여 해당하는 데이터를 가져왔다.

 

출처

jsonplaceholder.typicode.com/

www.theteams.kr/teams/2440/post/67326