[프론트엔드] REACT 뉴스 뷰어 만들기 [2]

이전 글

• 2022.03.22 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [1]

 

 

1.  axios를 사용한 API 테스트 

 

 

axios 라이브러리를 사용하여 먼저 API를 GET 으로 가져올 수 있는지 테스트 해보자.

 

- App.js

 

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  // API를 넘겨받을 state 선언
  const [data, setData ] = useState(null);

  const onClick = async () => {
    // axios 라이브러리로 apic call 
    try {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1',
      );
      // 응답 data state 저장
      setData(response.data);
    } catch (e) {
      console.log(e)
    }
  };
  return (
    <div>
      <div>
        <button onClick={() => onClick()}>불러오기</button>
      </div>
      {/* JSON 문자열 뿌릴 영역 */}
      {data && <textarea rows={7} value={JSON.stringify(data, null, 2)} readOnly={true} />}
    </div>
  );
};

export default App

 

 

 

2.  화면 결과

 

 

정상적으로 호출된다면 아래와 같이 API를 서버에서 받아오는지 확인 해보자