[React]fetch를 사용하여api에서 json 데이터를 얻기(GET 방법)

이번에는 React에서fetch를 사용하고api에서 json 데이터를 얻는 방법을 간단하게 알려드릴게요.바로 GET 방법의 방법입니다.
절차.
1. React app 만들기
2.　Fetch.js에 코드 입력
3.　App.js에 코드 입력
4. 결과
React app 작성

$ npx create-react-app my-app
＄ cd my-app
＄ yarn build
$ yarn start

npm

라면

$ npx create-react-app my-app
＄ cd my-app
＄ npm run build
$ npm start

이렇게 되면 리액트 앱은 간단히 성공할 수 있다.
Fetch.js에 코드 입력
다음은 src의 Fetch입니다.js 파일을 만들고 다음 코드를 추가합니다.
(이번에는 함수 구성 요소를 사용합니다.)

import React, {useState, useEffect} from 'react'

const Fetch = () => {

    const [posts, setPosts] = useState([])

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts', {method: 'GET'})
        .then(res => res.json())
        .then(data => {
            setPosts(data)
        })
    },[])

    return (
        <div>
            <ul>
                {
                    posts.map(post => 
                    <li key={post.id}>{post.title}</li>
                    )
                }
            </ul>

        </div>
    )
}

export default Fetch;

fetch(")의 문자열 섹션에서 두드리려는 API의 URL을 설명합니다.
이번에는dummy로https://jsonplaceholder.typicode.com/posts사용했습니다.
→ localhost의 API인 경우
http://localhost:3000/posts시, 패키지.json 파일
"proxy": "http://localhost:3000", 추가적으로fetch("/posts")를 해야 합니다.
fetch 방법을 사용할 때 방법의 지정은 {}을 사용합니다.이번에는 GET 방법입니다. 그래서 {method:'GET'}로.
.then에서 응답을 얻습니다.
App.js에 코드 입력
마지막으로 src의 App입니다.js에 코드를 추가합니다.

import logo from './logo.svg';
import './App.css';
import Fetch from './components/Fetch';　　　　　　　　　　　//　⇦ ここを追加した

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Fetch /> 　　　　　　　　　　　　　　　　　　　　　　//　⇦ ここを追加した
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

표시하고 싶지 않은 물건의 코드는 삭제할 수 있습니다.
결실
만약 아래와 같이 실행한다면 성공할 것이다.🎉