[React] 프로젝트 만들기 part7

Reference

이 프로젝트는 코딩애플 리액트 강의를 참고하여 제작되었습니다.

https://codingapple.com/course/react-basic/

---

---

json을 axios로 연결하고 콘솔 체크 합니다.

 

[
  {
    "id" : 3,
    "title" : "Flowey",
    "content" : "only 5 inches",
    "price" : 120000
  },
  {
    "id" : 4,
    "title" : "Baby shoes",
    "content" : "for less than 6",
    "price" : 120000
  },
  {
    "id" : 5,
    "title" : "Red Herring",
    "content" : "Born in France",
    "price" : 120000
  }
]

 

data2.json

 

홈에 상품3개가 좀 적어 보입니다.

리드모어 유아이를 만들어서 탭하면 json 데이터를 끌어 와서 상품 3개를 추가 하겠습니다.

 

CDN json data를 준비 합니다.

raw 데이터로 준비 합니다.

 

https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/data2.json

---

Axios

[React] Axios

[React] Axios

 

 

json은 axios가 잘 어울립니다.

액시오스를 설치 합니다.

---

App.jsx

액시오스 임포트 합니다.

import axios from "axios";

---

라우츠/라우트/라우츠/라우트루드 내부 굿즈반복문디브 바로 아래에 더보기 버튼 유아이를 만듭니다.

그리고 온클릭이벤트 추가합니다.

<button onClick={() => {}}>VIEW MORE</button>

---

              <button
                onClick={() => {
                  axios
                    .get(
                      'https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/data2.json'
                    )
                    .then((data2) => {
                      console.log(data2.data);
                    });
                }}
              >
                VIEW MORE
              </button>

 

액시오스로 데이터를 가져옵니다.

에이싱크러너스 콜백펑션으로 콘솔 찍습니다.

 

data는 말 그대로 액시오스로 로드하는 데이터를 뜻합니다.

data2는 액시오스에서 사용할 데이터 네임 입니다.

 

아직 뷰는 바뀌지 않습니다.

뷰 열고 버튼탭 후 콘솔에서 데이터 체크합니다.

 

---

              <button
                onClick={() => {
                  axios
                    .get(
                      "https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/data2.json"
                    )
                    .then((data2) => {
                      console.log(data2.data);
                    })
                    .catch(() => {
                      console.log("what the...");
                    });
                }}
              >
                VIEW MORE
              </button>

캐치로 예외처리 합니다.

 

액시오스 3스텝은 아래와 같습니다.

겟 - 덴 - 캐치

---

              {/* 'VIEW MORE' 버튼 클릭 시 axios를 사용하여 추가 데이터를 가져옵니다. */}
              <button
                onClick={() => {
                  // axios.get()을 사용하여 지정된 URL에 HTTP GET 요청을 보냅니다.
                  axios
                    .get(
                      "https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/data2.json"
                    )
                    .then((data2) => {
                      // 요청이 성공했을 때 실행되는 콜백 함수입니다.
                      // 서버에서 받은 데이터를 콘솔에 출력합니다.
                      console.log(data2.data);
                    })
                    .catch(() => {
                      // 요청이 실패했을 때 실행되는 콜백 함수입니다.
                      // 오류 메시지를 콘솔에 출력합니다.
                      console.log("what the...");
                    });
                }}
              >
                VIEW MORE
              </button>

---

test

 

제이슨 유알엘을 혁명적인 유알엘로 수정해서 버튼 누르고 콘솔 체크 합니다.

지금은 뷰는 신경쓰지 말고 콘솔 데이터만 찍어 보면 됩니다.

즉, CDN 패스를 이상하게 변경 합니다.

콘솔로 예외처리 결과를 체크 합니다.

what the.. 이렇게 뜨면 잘 된겁니다.

 

---

Callback function

https://lshjju.tistory.com/290

---

Asynchronous Operation

https://lshjju.tistory.com/368

---

Axios vs fetch

object/array 이런것은 원래 서버에서 다이렉트로 주고 받을 수 없습니다.

 

object/array 자료에 따옴표를 해놓은 것을
"{"name" : "kim"}"
JSON 이라고 합니다.

 

JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있습니다.
일단 문자로 서버로 주고 받습니다.

그 다음 이것을 다시 오브젝어레이로 바꿔야 읽을수 있습니다.

axios 라이브러리는 JSON -> object/array 변환을 자동으로 해줍니다.

그래서 편합니다.

 

axios 대신 fetch를 사용해도 됩니다.

하지만, 펫치는 JSON을 오브젝어레이로 자동 변환해 주지 못합니다.

그래서 액시오스가 좀 더 편합니다.

---

---

모어버튼 탭하면 상품을 더 보여 줍니다.

---

let [shoes, setShoes] = useState(data);

 

현재까지는 리액트 내부 코드의 데이터 파일만을 사용했습니다.

하지만 이제부터는 내부데이터에 제이슨데이터도 추가해야 합니다.

즉, 이제 슈즈 데이터는 변경되어야 합니다.

 

그렇다면 당연히 유즈스테이트가 출동해야 합니다.

그러기 위해 변수에 인덱스1번 추가 합니다.

즉, 슈즈 배리어블에 셋슈즈를 추가합니다.

 

본인의 깃허브 CDN에 신발이미지 데이터가 있을것입니다.

거기서 3개 정도 사용하겠습니다.

---

                    .then((data2) => {
                      console.log(data2.data);
                      let copy = [...shoes, ...data2.data];
                      setShoes(copy);
                    })

 

액시오스 덴에 데이터 세팅 합니다.

 

shoes 내부 어레이를 하나하나 풀어서 나열 합니다.

즉, Spread syntax 을 사용 합니다.

 

data2.data 내부 어레이도 마찬가지 입니다.

이렇게 풀어진 우측데이터가 왼쪽 데이터에 합쳐집니다.

 

즉, 슈즈카피본데이터에 데이터2카피본데이터를 추가 합니다.

그것을 카피 배리어블에 세팅 합니다.

즉, 슈즈카피본데이터에 데이터2카피본데이터를 추가 합니다.

그것을 카피 배리어블에 세팅 합니다.

---

              {/* 'VIEW MORE' 버튼 클릭 시 axios를 사용하여 추가 데이터를 가져옵니다. */}
              <button
                onClick={() => {
                  // axios.get()을 사용하여 지정된 URL에 HTTP GET 요청을 보냅니다.
                  axios
                    .get(
                      "https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/data2.json"
                    )
                    .then((data2) => {
                      // 요청이 성공했을 때 실행되는 콜백 함수입니다.
                      // 서버에서 받은 데이터를 콘솔에 출력합니다.
                      console.log(data2.data);
                      // 기존 'shoes' 상태와 새로 가져온 'data2.data'를 합쳐 새로운 배열 'copy'를 만듭니다.
                      let copy = [...shoes, ...data2.data];
                      // 'setShoes' 함수를 호출하여 'shoes' 상태를 업데이트합니다.
                      // 이로 인해 컴포넌트가 다시 렌더링되고 새로운 상품 목록이 화면에 표시됩니다.
                      setShoes(copy);
                    })
                    .catch(() => {
                      // 요청이 실패했을 때 실행되는 콜백 함수입니다.
                      // 오류 메시지를 콘솔에 출력합니다.
                      console.log("what the...");
                    });
                }}
              >
                VIEW MORE
              </button>

---

test

더보기 유아이를 탭해서 뷰를 체크 합니다.

---

Completion

import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Routes, Route, Link, Outlet } from 'react-router-dom';
import data from './data.jsx';
import Detail from './routes/Detail';
import Remove from './routes/Remove';
import axios from 'axios';

export default function App() {
  let [shoes, setShoes] = useState(data);

  return (
    <div className="App">
      <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
            Navbar
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <Link to="/" class="nav-link active" aria-current="page">
                Home
              </Link>
              <Link to="/detail" class="nav-link active" aria-current="page">
                Detail
              </Link>
              <Link
                to="/company/manpower"
                class="nav-link active"
                aria-current="page"
              >
                Manpower
              </Link>
              <Link
                to="/company/map"
                class="nav-link active"
                aria-current="page"
              >
                Map
              </Link>
              <Link to="/remove" class="nav-link active" aria-current="page">
                account remove
              </Link>
            </div>
          </div>
        </div>
      </nav>

      <Routes>
        <Route
          path="/"
          element={
            <>
              <div className="main-bg"></div>

              <h1 className="my-5">Nike shop</h1>

              <div className="d-flex flex-column mb-3">
                {shoes.map((shoe, i) => {
                  return <Goods shoes={shoe} i={i}></Goods>;
                })}
              </div>
              <button
                onClick={() => {
                  axios
                    .get(
                      'https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/data2.json'
                    )
                    .then((data2) => {
                      console.log(data2.data);
                      let copy = [...shoes, ...data2.data];
                      setShoes(copy);
                    })
                    .catch(() => {
                      console.log('what the...');
                    });
                }}
              >
                VIEW MORE
              </button>
            </>
          }
        />
        <Route path="/detail/:id" element={<Detail shoes={shoes} />} />
        <Route path="/company" element={<Company />}>
          <Route path="manpower" element={<Manpower />} />
          <Route path="map" element={<Map />} />
        </Route>
        <Route path="*" element={<Nopage />} />
        <Route path="/remove" element={<Remove />} />
      </Routes>

      <div class="card m-5">
        <div class="card-header">Featured</div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">
            With supporting text below as a natural lead-in to additional
            content.
          </p>
          <a href="#" class="btn btn-primary">
            Go somewhere
          </a>
        </div>
      </div>
    </div>
  );
}

function Goods(props) {
  return (
    <div className="p-2">
      <img
        src={
          'https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/ca-shop/s' +
          (props.i + 1) +
          '.PNG'
        }
        width="80%"
      />
      <h4 className="my-3">{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  );
}

function Company() {
  return (
    <div>
      <h4 className="my-3">company</h4>
      <p>It's a company</p>
      <Outlet></Outlet>
    </div>
  );
}

function Manpower() {
  return (
    <div>
      <img
        src="https://plus.unsplash.com/premium_photo-1688821131205-52f5c633ce69?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        width="80%"
      />
    </div>
  );
}

function Map() {
  return (
    <div>
      <img
        src="https://images.unsplash.com/photo-1548345680-f5475ea5df84?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        width="80%"
      />
    </div>
  );
}

function Nopage() {
  return (
    <div>
      <h4 className="my-2">No page</h4>
      <p>hmmm....</p>
      <img
        src="https://cdn.maily.so/ixmvzk5qh83mee5kcjw8pp55fihe"
        width="80%"
      />
    </div>
  );
}