[ JS/리액트 ] axios 써서 데이터 넣는 방법

1. 새 터미널에 npm install axios 입력해서 설치해줌.

2. 상단에 import 해주기

import axios from 'axios'

3.  useEffect 사용. 
= 컴포넌트가 처음 딱 장착이 됐을 때 , 업데이트 될 때 실행
= return 문 밖에, 컴포넌트 안에
( return 문 위에 써줌) 

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

로 잘 되는 지 확인.

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

 

then 하고 catch 사용

4. 상품을 9개씩 보여줄 수 있도록 
useState 하나 생성 
= 빈배열 만들어주기. 

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

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

생성해 준 useEffect 코드

const [items, setItems] = useState([]);

= 빈배열 State ( 초기값이 빈 배열인 상태 ) 

상태로 저장해주는 이유: 컴포넌트가 기억하기 위해서

 

- items : 
상품 목록 데이터 ( 외부 데이터 ) 담을 변수(그릇)
[] 이렇게 빈배열로 정의
빈배열로 정의 먼저 한다음에 데이터를 배열에다가 담아줄 것임.

- setItems : 
상태(items) 값을 업데이트 하는 함수
데이터를 받아와서 items에 저장하고 싶을 때
= 빈 배열인 items 의 상태를 바꿀 때

5. useEffect 로 돌아가서 생성한 State 에다가 데이터를 넣어주기

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

setItems 에다가 데이터 결과들을 넣어준다.

items 상태를 외부에서 가져온 상품 목록으로 바뀌게끔 setItems를 사용해서 바꿔줌.

• **response.data**는 가져온 데이터.

 return (
    <div className="item-container">
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>{items[0].title}</p>
            <p>{items[0].price}</p>
          </div>
        </div>
        <img
          src="https://kku-git.github.io/nff_product/fingers/ring1.jpg"
          alt="ring 1"
        />
      </div>
    </div>
  );

잘 뜨는 지 확인 가능

6. 추가로 로딩페이지 만들어주기
 **"만약 items가 비어 있으면 열어보지 마"**라는 조건 추가.
- if 문 사용
= html 안에서는 if 조건문 못써서 바깥에다가 생성

 

items 배열이 초기 상태에서 빈 배열이기 때문에, 

items[0]에 접근할 때 undefined가 되고,

그에 따라 title 속성에 접근할 수 없어서 오류가 발생할 수 있음.

 

items[0]에 접근하는 이유>>

<p>{items[0].title}</p>

컴퓨터는 **"아, 첫 번째 항목이 있겠구나"** 라고 생각.

그래서 바로 items[0]에 접근하려고 함.

  if (items.length === 0) {
    return <p>LOADING...</p>;
  }

 

items.length :

배열의 길이, 즉 배열에 들어 있는 아이템의 개수

const items = [];
console.log(items.length);

const items = ["apple", "banana", "cherry"];
console.log(items.length); // 3

items.length === 0는  배열이 비어 있는지 확인

(즉, 아이템이 하나도 없는 상태인지) 확인하는 조건

 

만약 배열에 아무 요소도 없다면

(즉, items.length가 0이라면)

조건이 참이 되어 Loading... 메시지를 보여주게 됨

if (items.length === 0) {
  <p>Loading...</p>;
}
<p>{items[0].title}</p>; // 여기에 문제가 생길 수 있음​

if문에다가 return을 써서 "로딩 중" 화면을 바로 반환하도록 함.

=  return을 사용하지 않으면 컴포넌트는 계속해서

그 아래 코드를 실행하려고 해서 문제가 생길 수 있음.

7. map 함수 사용해서 데이터 개수만큼 생성하게 하기.
하드코딩 -> 유동적

 return (
    <div className="item-container">
      <div className="item">
        <div className="overlay-wrap">
          <div className="overlay">
            <p>{items[0].title}</p>
            <p>{items[0].price}</p>
          </div>
        </div>
        <img
          src="https://kku-git.github.io/nff_product/fingers/ring1.jpg"
          alt="ring 1"
        />
      </div>
    </div>
  );

그냥 데이터 잘 뽑아 내주는 지만 확인했던 코드

= 하드 코딩 돼있음.

  return (
    <div className="item-container">
      {items.map((a, i) => (
        <div key={i} className="item">
          <div className="overlay-wrap">
            <div className="overlay">
              <p>{a.title}</p> {/* 각각의 상품 제목 */}
              <p>{a.price}</p> {/* 각각의 상품 가격 */}
            </div>
          </div>
          <img
            src={`https://kku-git.github.io/nff_product/fingers/ring${
              i + 1
            }.jpg`}
            alt={`ring ${i + 1}`}
          />
        </div>
      ))}
    </div>
  );

map 함수 사용해서 유동적으로 만들어주기.

 

젤 큰 틀인 item-container 을 제외하고

안에 있는 div 에다가 map 을 씌워줬다. 

( 여러개 생성할 div태그 )

 <p>{Items[i].title}</p> {/* 각각의 상품 제목 */}
 <p>{Items[i].price}</p> {/* 각각의 상품 가격 */}

이렇게 써줘도 되고 자유롭게 써주면 됨.

• a 파라미터 = array 안에 있던 하나하나의 데이터 ( 변수 처럼 사용)

map 함수는 원래 사용할 때 return 을 써줘야하지만

안써줘도 되는 방법 :

화살표 함수에서 중괄호를 사용하는지 사용 여부

• key는 리스트를 렌더링하는 요소의 가장 바깥쪽 요소에 지정

8. map 함수 사용 시 이미지 경로 수정
= 백틱 사용 ( 템플릿 리터럴 )

<img src="https://kku-git.github.io/nff_product/fingers/ring1.jpg" alt="ring 1" />

기존의 코드는 정적인 값을 사용.

<img
  src={`https://kku-git.github.io/nff_product/fingers/ring${i + 1}.jpg`}
  alt={`ring ${i + 1}`}
/>

${}: 변수 삽입

 

**${i + 1}**은 i에 1을 더한 값을 문자열 중간에 삽입해줌.

예를 들어, i가 0이면 ${i + 1}은 **1**이 되고,

결과적으로 src="https://kku-git.github.io/nff_product/fingers/ring1.jpg"로 변환됨.

i 는 map 함수의 인덱스 니까 0 부터 들어감.