-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from hayoung123/feature/useFetch
[Feat]: useFetch Closes #8
- Loading branch information
Showing
4 changed files
with
53 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 10 additions & 44 deletions
54
sidedish/src/component/BestSidedish/BestSidedishList/BestSidedishList.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,50 +1,16 @@ | ||
import React from 'react'; | ||
import React, { useState, useEffect } from 'react'; | ||
import BestSidedishItem from 'component/BestSidedish/BestSidedishList/BestSidedishItem'; | ||
import useFetch from 'hooks/useFetch'; | ||
|
||
const BestSidedishList = ({ focusedCategory }) => { | ||
// data 를 fetch 해서 받아왔다 가정. | ||
const bestSidedishList = data.items.map((item) => <BestSidedishItem item={item} />); | ||
return <div>{bestSidedishList}</div>; | ||
const { data, loading } = useFetch( | ||
`https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/best/${focusedCategory}` | ||
); | ||
|
||
const bestSidedishList = data | ||
? data.items.map((item) => <BestSidedishItem key={item.detail_hash} item={item} />) | ||
: null; | ||
return loading ? <div>Loading...</div> : <div>{bestSidedishList}</div>; | ||
}; | ||
|
||
export default BestSidedishList; | ||
|
||
const data = { | ||
category_id: '17011200', | ||
name: '할인특가 세트상품', | ||
items: [ | ||
{ | ||
detail_hash: 'H9881', | ||
image: 'https://cdn.bmf.kr/_data/product/H9881/f2a7b4df359c850b1a9eb57e17ddf6fc.jpg', | ||
alt: '[소중한식사] 경상도 한상차림', | ||
delivery_type: ['새벽배송', '전국택배'], | ||
title: '[소중한식사] 경상도 한상차림', | ||
description: '경상도 명물 요리 세 가지를 한 상에!', | ||
n_price: '39,000', | ||
s_price: '31,200원', | ||
badge: ['이벤트특가'], | ||
}, | ||
{ | ||
detail_hash: 'HDF4C', | ||
image: 'https://cdn.bmf.kr/_data/product/HDF4C/954b78f9111bbef54ede9fdcdf1298d8.jpg', | ||
alt: '[딩고] 시그니처 3종 SET', | ||
delivery_type: ['새벽배송', '전국택배'], | ||
title: '[딩고] 시그니처 3종 SET', | ||
description: '오늘 저녁은 이상하게 안주빨을 세워보고 싶다!', | ||
n_price: '32,800', | ||
s_price: '24,000원', | ||
badge: ['이벤트특가'], | ||
}, | ||
{ | ||
detail_hash: 'H7F20', | ||
image: 'https://cdn.bmf.kr/_data/product/H7F20/dc164f934d614469d097ccd0cd57cb5e.jpg', | ||
alt: '[집밥의완성]초여름보양세트', | ||
delivery_type: ['새벽배송', '전국택배'], | ||
title: '[집밥의완성]초여름보양세트', | ||
description: '무더위에 대비하는 6월 한상차림 초여름 보양세트', | ||
n_price: '26,000', | ||
s_price: '18,200원', | ||
badge: ['이벤트특가'], | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
const fetchData = async (url, cb) => { | ||
try { | ||
const res = await fetch(url); | ||
const data = await res.json(); | ||
cb(data); | ||
} catch (err) { | ||
console.log(err); | ||
} | ||
}; | ||
|
||
export default fetchData; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React, { useState, useEffect } from 'react'; | ||
|
||
const useFetch = (url) => { | ||
const [data, setData] = useState(); | ||
const [loading, setLoading] = useState(false); | ||
|
||
const fetchData = async (url, cb) => { | ||
try { | ||
setLoading(true); | ||
const res = await fetch(url); | ||
const data = await res.json(); | ||
setLoading(false); | ||
cb(data); | ||
} catch (err) { | ||
console.log(err); | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
fetchData(url, setData); | ||
}, []); | ||
|
||
return { data, loading }; | ||
}; | ||
|
||
export default useFetch; |