1. 공식 문서와 환경 설정

시작하기

npx create-react-app my-app
cd my-app
npm i axios

2. 데이터 초기화

폴더와 파일은 오른쪽과 같이 수정해주시고 그 안에 있는 코드들은 아래와 같이 수정해주세요.

Untitled

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

function App() {
  return (
    <div className="App">
      <h1>test2</h1>
    </div>
  );
}

export default App;

import React from 'react';
// import ReactDOM from 'react-dom'; //구버전
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab="home" />);

3. 컴포넌트 세팅

src폴더 안에 components폴더를 만들어 그 안에 Product.jsx라는 파일을 만들도록 하겠습니다.

import Product from './components/Product'

function App() {
  return (
    <div className="App">
      <h1>test2</h1>
      <Product/>
    </div>
  );
}

export default App;

import React from 'react'

export default function Product() {
    return (
        <div>Product</div>
    )
}

npm start를 통해 연결 되었는지만 우선 확인해주세요.

4. fetch와 비교 분석

import React from 'react'
import axios from 'axios'
import { useEffect } from 'react'

export default function Product() {
    useEffect(()=>{
        axios.get('<http://test.api.weniv.co.kr/mall>')
            .then(res => {
                console.log('axios')
                console.log(res)
                console.log(res.data)
            })
        fetch('<http://test.api.weniv.co.kr/mall>')
            .then(res => {
                console.log('fetch')
                console.log(res)
                // console.log(res.json()) // pending됩니다.
                return res.json()
            })
            .then(data => {
                console.log(data)
            })
    },[])
    return (
        <div>Product</div>
    )
}