react에서 axios 사용하기

1. react 프로젝트 실행중인 상태에서 axios를 설치한다.

$ npm install axios

2. 설치 완료 후 확인

react 프로젝트의 package.json 파일을 열면 dependencies에 axios가 추가되어 있다.

dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

node_modules 디렉터리에도 axios가 추가되어 있다.

3. public 디렉터리 안에 images 디렉터리를 만들고 사용할 이미지들을 넣는다.

4. src 디렉터리 안에 main 디렉터리를 만들고 index.css, index.js를 만든다.

src/main/index.css
...
index.js에서 사용되는 스타일 지정

src/main/index.js


import React from "react";
import "./index.css";
import axios from "axios";

function MainPageComponent() {
  const [products, setProducts] = React.useState([]);
  React.useState(function () {
    axios
      .get(
        "https://5a51cacc-3f5f-41e1-9d51-19ca29070ff3.mock.pstmn.io/products"
      )
      .then(function (result) {
        const products = result.data.products;
        setProducts(products);
      })
      .catch(function (error) {
        console.error(error);
      });
  }, []);

  return (
    <div>
      <div id="header">
        <div id="header-area">
          <img src="images/icons/logo.png" />
        </div>
      </div>
      <div id="body">
        <div id="banner">
          <img src="images/banners/banner1.png" />
        </div>
        <h1>판매되는 상품들</h1>
        <div id="product-list">
          {products.map(function (product, index) {
            return (
              <div className="product-card">
                <div>
                  <img className="product-img" src={product.imageUrl}></img>
                </div>
                <div className="product-contents">
                  <span className="product-name">{product.name}</span>
                  <span className="product-price">{product.price}원</span>
                  <span className="product-seller">
                    <img
                      className="product-avatar"
                      src="images/icons/avatar.png"
                    ></img>
                    <span>{product.seller}</span>
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div id="footer"></div>
    </div>
  );
}

export default MainPageComponent;

5. app.js에서는 main 디렉터리에 있는 index.js를 import하고 컴포넌트를 사용한다.

src/app.js

import MainPageComponent from "./main/index.js";

...
function App() {
...
return <MainPageComponent></MainPageComponent>;
}

export default App;

app.css가 우선되어 index.css가 반영이 안될 수 있으니 스타일 적용이 안된곳이 있다면 app.css를 참고한다.

생각
뭔가 좀 더 간략하면서도 처음 사용하는 문법이 어쩐지 낯설다ㅎㅎ
useState는 많이 사용할것 같은데, 느낌적으로 알것 같으면서 이해가 잘 안되는 부분이다.
태그와 변수처리가 직관적이라서 다른 사람이 작성한 코드도 javascript보다는 쉬울것 같다는 생각이 든다.