Search

μƒν’ˆ 관리 - 데이터 연동

ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μ„œλ²„λ‘œ 비동기 데이터 μš”μ²­

import React, { useEffect, useState } from 'react' import Card from './Card' const CardList = () => { // Card μ»΄ν¬λ„ŒνŠΈμ— 전달할 데이터 // const cardData = [ // { // no : 1, // title: '아메리카노', // content: 'μ½œλ‘¬λΉ„μ•„ μ›λ‘λ‘œ λ§Œλ“ ...', // likes: 100, // img: 'https://i.imgur.com/D1ic2Xk.jpg' // }, // { // no : 2, // title: 'μΉ΄νŽ˜λΌλ–Ό', // content: 'λΌλ–ΌλŠ” 말이야...', // likes: 200, // img: 'https://i.imgur.com/hAzIEVv.jpg' // }, // { // no : 3, // title: 'μΏ ν‚€ν”„λΌνŽ˜', // content: '였레였 λ‹€ν–‡λ„€...', // likes: 300, // img: 'https://i.imgur.com/kDhIhLv.jpg' // }, // ] // ⭐ state μ„ μ–Έ // 🧊 productList const [productList, setProductList] = useState([]) // 🌞 데이터 μš”μ²­ ν•¨μˆ˜ const getProductList = () => { const response = fetch('http://localhost:8080/products') .then(response => { // μ„œλ²„ 응닡을 JSON ν˜•μ‹μœΌλ‘œ νŒŒμ‹± return response.json(); }) .then(data => { // νŒŒμ‹±λœ 데이터 좜λ ₯ console.log(data); // ⚑ μƒνƒœ μ—…λ°μ΄νŠΈ setProductList(data) }) .catch(error => { // 였λ₯˜ 처리 console.error('Request failed:', error); }); } // ❔ useEffect() ν›… μ‚¬μš© // "λ Œλ”λ§ μ‹œ 호좜 λ˜λŠ” ν•¨μˆ˜" // : ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ—μ„œ 마운트, μ—…λ°μ΄νŠΈ, μ–Έλ§ˆμš΄νŠΈ 생λͺ…μ£ΌκΈ° μž‘μ—…μ„ // μ²˜λ¦¬ν•  수 μžˆλ„λ‘ ν•΄μ£ΌλŠ” ν›… useEffect(() => { getProductList(); }, []); return ( <div> <h1>μƒν’ˆ λͺ©λ‘</h1> <div style={{ display: "flex", }}> { productList.map( (card, index) => { // cardData.map( (card, index) => { // return <Card key={card.no} title={card.title} content={card.content} /> // return <Card key={card.no} {...card} /> return <Card key={card.no} card={ card } /> }) } </div> </div> ) } export default CardList
JavaScript
볡사