NEXT JS - Axios (HTTP클라이언트 라이브러리)

NEXT JS - 커스텀 NEXT JS 실습

작성자

준돌

준돌

kai0915

NEXT JS - Axios

데이터를 외부에서(API 등) 에서 가져오는 방법은 JQuery Ajax 도 있지만, 요청 시 취소와 TypeScript를 지원한다는 장점이 있는 Axios를 사용하도록 하겠습니다.

Axios(http 클라이언트 라이브러) 란?

외부 API에서 데이터를 가져오는 방법은 여러가지가 있습니다. JQuery 라이브러리를 사용하는 방법도 있지만, HTTP 클라이언트 라이브러리 인 Axios 를 사용해 보도록 하겠습니다.

설치

  • NPM
$ npm install axios --save
  • Yarn
$ yarn add axios

사용법(예제)

  • GET /api/todos (Select)
// GET
axios.get('/api/todos')
  .then(res => {
    console.log(res.data)
  })

or

const result = await axios.get('/api/todos');
console.log(result.data)  
  • GET /api/todos/?title=NEXTJS (Options 이 추가 된 Select)
//axios 요청 메소드의 두 번째 인자로 config 객체를 넘길 수 있습니다

// config 객체
axios.get('/api/todos', {
  params: { // query string
    title: 'NEXT JS'
  },
  headers: { // 요청 헤더
    'X-Api-Key': 'my-api-key'
  },
  timeout: 3000 // 1초 이내에 응답이 오지 않으면 에러로 간주
}).then(res => {
    console.log(res)
})
  • POST /api/todos (Create)
// POST
axios.post('/api/todos', {title: "ajax 공부"})
  .then(res => {
    console.log(res);
  })
  • PATCH /api/todos/1 (Update)
// PATCH
axios.patch('/api/todos/3', {title: "axios 공부"})
  .then(res => {
    console.log(res);
  })
  • DELETE /api/todos/1 (Delete)
// DELETE
axios.delete('/api/todos/3')
  .then(res => {
     console.log(res);
  })

지금까지 진행한 프로젝트에 적용 예

  • /pages/index.js 파일 수정

첫 페이지가 렌더링 될 때, Axios 라이브러리로 해당 외부 API 에서 리스트를 가져와서 출력 하도록 하겠습니다. 참고로 직접 로컬에 API 서버가 있다면 로컬에 API를 이용하여 사용해 보세요.

import Layout from '../components/Layout';
import Link from 'next/link';
import React from 'react';

import axios from 'axios'

const Index = (props) => (
    <Layout>
        <p>Hello, Next JS</p>
        <h2>
            홈 화면
        </h2>

        <ul>
            {props.data.map(({show}) => (
                <li key={show.id}>
                    <Link as={`/p/${show.id}`} href={`/post?title=${show.title}`}>
                        <a>{show.name}</a>
                    </Link>
                </li>
            ))}
        </ul>
    </Layout>
);

Index.getInitialProps = async function() {
        const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman')
        const data = await res.data;

        console.log(`Show data fetched. Count: ${data.length}`);

        return {
            data: data
        }
    };

export default Index

Tags : javascript react nextjs 

comments powered by Disqus