[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (7)

참고할 글 

[리액트] 암기할 것 = state / props / 컴포넌트 / UI (tistory.com)

[리액트] 암기할 것 = state / props / 컴포넌트 / UI

[리액트] 페이지 함수 - 매개변수와 인수, Array.from() (tistory.com)

[리액트] 페이지 함수 - 매개변수와 인수, Array.from()

[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용 (tistory.com)

[리액트] - 데이터 바인딩 / 컴포넌트화 / props 활용 / map() 활용

저번 시간 숙제 해설 (Card 컴포넌트 만들기) (tistory.com)

저번 시간 숙제 해설 (Card 컴포넌트 만들기)

 

map 함수 

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray)

컴포넌트 참고

function Card(props) {
  return (
    <div className="col-md-4">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
  );
}

상품 사진이 3개 다 똑같이 보이는 것

   {/* map 함수 */}
          {shoes.map((a, i) => {
            // 컴포넌트 여기에 사용
            return (<Card shoes={shoes[i]} i={i}></Card>;
          })}
          

function Card(props) {
  return (
    <div className="col-md-4">
      <img
        src={
          "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"
        }
        width="80%"
      />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  );
}

---

FingerPage.js 에서
아이템 컴포넌트 수정하기

< 목표 >
1) 아이템 데이터 개수만큼 컴포넌트 생성해주기
- 아이템 컴포넌트 ( <ItemContainer />) 수정해주기 
- map 함수 사용해주기
- 사진도 그에 맞게 수정해주기

FingerPage.js

import Header from "../components/Header";
import LeftSidebar from "../components/LeftSidebar";
import RightSidebar from "../components/RightSidebar";
import SearchOverlay from "../components/SearchOverlay";
import Pages from "../components/Pages";
import Footer from "../components/Footer";
import { Link } from "react-router-dom";
import ItemContainer from "../components/Items";

function FingerPage(props) {
  return (
    <div className="wrapper">
      {/* 검색창 */}
      {props.Search === true ? (
        <SearchOverlay setSearch={props.setSearch} />
      ) : null}

      {/* 헤더 */}
      <Header />

      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={props.setSearch}
          setIsShopHovered={props.setIsShopHovered}
          isShopHovered={props.isShopHovered}
          setIsBoardHovered={props.setIsBoardHovered}
          isBoardHovered={props.isBoardHovered}
        />

        {/* 중앙 메인 콘텐츠 */}
        <main>
          <div className="image-container">
            <Link to="/">
              <img
                src="https://kku-git.github.io/nff_product/logo.svg"
                alt="로고"
                className="logo-image"
              />
            </Link>
          </div>
          {/* items */}
          <ItemContainer />
          {/* pages */}
          <Pages />
          {/* Footer */}
          <Footer />
        </main>

        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default FingerPage;

반지 서브 페이지 ( 저번에 만든 것 )

저번에 만든 아이템 컴포넌트

하나 하나 하드 코딩 돼있다.

---

1. 중복 html 코드 지워주기.

function ItemContainer() {
  return (
    <div className="item-container">
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>제목</p>
            <p>가격</p>
          </div>
        </div>
        <img src="/img/ring_1.jpg" alt="ring 1" />
      </div>
    </div>
  );
}

export default ItemContainer;

우선 중복되는 거 지워줌.

---

2. 자료 경로 갖고와줌 ( 서버 만든 거 )

 

https://kku-git.github.io/nff_product/fingers/ring1.jpg

https://kku-git.github.io/nff_product/product.json

---

ajax 사용해주기
- . axios 같은 외부 라이브러리 사용

[리액트] ajax(get/post), fetch (tistory.com)

[리액트] ajax(get/post), fetch

axios 사용해줄 거기 때문에 설치해준다.

npm install axios

그리고 상단에 import 해주기

import axios from 'axios'

---

데이터 넣기 

구현 방법>>
axios로 데이터 가져오기: useEffect를 사용해 
컴포넌트가 마운트될 때 데이터를 한 번 불러오기.

상태 저장: 불러온 데이터를 useState로 저장하고, 그 데이터를 <p> 태그에 출력.

1) useEffect 생성해주기.

retrun 문 바깥에다가 생성해준다. 

-컴포넌트가 처음 딱 장착이 됐을 때 , 업데이트 될 때 실행이 된다는 의미.

  useEffect(() => {
    console.log(1);
  });

1이 잘 출력되는 지 확인해주기.

2) axios 사용해서 데이터 갖고와주기

.then 사용

-  안에 콜백함수 넣어주고 { } 안에 실행하고 싶은 코드 적어줌.

파라미터 data 를 추가

- 중괄호 안에 있는 data가 실제 서버에서 갖고온 데이터

 useEffect(() => {
    axios
      .get("https://kku-git.github.io/nff_product/product.json")
      .then((data) => {
        console.log(data);
      })
      .catch(() => {
        console.log("실패함");
      });
  });

콘솔창으로 찍었을 때 data 가 잘 나오는 거 확인.

  .then((data) => {
                    	console.log(data.data)
                    });

서버가 보낸 핵심 데이터를 출력하고 싶은 경우

.data 사용