json으로 데이터 받아오기 [자신감up 실습6]

정리

 

props는 단순히 데이터를 전해주는 거다. 기본 변수값 부터, 객체, 태그까지 모든 데이터를 전달할 수 있다.

그걸 부모 모듈에 있는 자식 모듈에서 변수로 받아서 저장한게 props다. 그 변수를 그냥 들고 오는것 뿐이다.

 

아래는 가져온 이미지는, 데이터를 분리하여 props에 보낼 데이터만 변수에 저장하는 모습이다.

늘 확 와닿지는 않던 나에게 와닿게 도와준 그림

들고오는 데이터의 구조

 

+ fetch는 계속 데이터를 요구하기때문에 useEffect(()=>{},[])로 감싸주는게 좋다. 

---

출력내역

---

코드

데이터에서 들고오고 싶은 자료를 map의 요소인 객체에서 원하는 값을 선택하면 순서대로 렌더링 된다.

function Item(props) {

  return (

    <div class="card">

      <img src={props.url} class="card-img-top" alt="..." />

      <div class="card-body">

        <h5 class="card-title">{props.name}</h5>

        <p class="card-text">

          {props.email}

          <br></br>- Phone: {props.phone} <br></br>- website: {props.website}

        </p>

        <a href="#" class="btn btn-primary">

          Go somewhere

        </a>

      </div>

    </div>

  );

}

function App() {

  const [users, setUsers] = useState([]); // useState의 초기 상태 명시

  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/users")

      .then((response) => response.json())

      .then((json) => setUsers(json));

  }, []); //데이터 받아오기를 처음 한번만 실행을 위해 useEffect로 감싸줌

  console.log("user??", users);

  return (

    <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

      {users.map((user) => (

        <Item

      url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsU

          name={user.name}

          email={user.email}

          phone={user.phone}

          website={user.website}

        />

      ))}

    </div>

  );

}

 

---

수정내역 : 콘솔 오류 제거를 위해 내가 className으로 bootstrap 모듈 수정 및 key를 들고와서 자식 컴포넌트에 추가했다.

import "./App.css";

import React, { useEffect, useState } from "react";

import "bootstrap/dist/css/bootstrap.min.css";

function Item(props) {

  return (

    <div className="card">

      <img src={props.url} className="card-img-top" alt="..." />

      <div className="card-body">

        <h5 className="card-title">{props.name}</h5>

        <p className="card-text">

          {props.email}

          <br></br>- Phone: {props.phone} <br></br>- website: {props.website}

        </p>

        <a href="#" className="btn btn-primary">

          Go somewhere

        </a>

      </div>

    </div>

  );

}

function App() {

  const [users, setUsers] = useState([]); // useState의 초기 상태 명시

  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/users")

      .then((response) => response.json())

      .then((json) => setUsers(json));

  }, []); //데이터 받아오기를 처음 한번만 실행을 위해 useEffect로 감싸줌

  console.log("user??", users);

  return (

    <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

      {users.map((user) => (

        <Item

          key={user.id}

          name={user.name}

          email={user.email}

          phone={user.phone}

          website={user.website}

        />

      ))}

    </div>

  );

}

export default App;