๐จ ๋ฌธ์ ์ํฉ
ํ ํ๋ก์ ํธ ์ค ๋ฐฑ์๋ ์๋ฒ์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ์ฌ ๋ฐ์ ํ, ์ด ์ ๋ณด๋ฅผ ๊ฐ๊ณตํด์ ํ๋ฉด์ ๋ ๋๋งํด์ฃผ๋ ์์ ์ด ์ฌ๋ฌ ๋ฒ ์์๋ค. ์ด ๋ ์์ฃผ ๊ณจ์น๋ฅผ ์ํ๊ฒ ํ๋ ์๋ฌ๊ฐ ํ๋ ์์ด ํฌ์คํธ๋ก ๋จ๊ธด๋ค.
const ReservationPage = () => {
const [lectureData, setLectureData] = useState({});
// ๋ฐฑ์์ ์ํ ๋ํ
์ผ ๋ฐ์ดํฐ ์์
useEffect(() => {
fetch(`/data/reservationData.json`, {
method: 'GET',
})
.then(response => response.json())
.then(data => {
setLectureData(data);
});
}, []);
if (lectureData === {}) {
return null;
}
...
}
์ฐ์ , fetch ํจ์๋ฅผ ํตํด ๋ฐฑ์๋๋ก๋ถํฐ ์๋์ ๊ฐ์ ๊ตฌ์กฐ์ JSON ๋ฐ์ดํฐ๋ฅผ ๋ฐ์๋ค.
{
"data": [
{
"images": "aimage",
"lectureDate": [
{
"isReserved": 0,
"lectureDate": "2022, 12, 23",
"lectureTimeOptionId": 1
}
],
"lectureId": 1,
"lectureText": "์์๋ญ ์คํ ์
ฐํ ๊นํธ์ค์ ๋น๋ฐ ๋ ์ํผ ํ์ณ์ค๊ธฐ",
"lectureTitle": "์์๋ญ 3์คํ ์ํ ๊นํธ์ค์ ๋น๋ฐ ๋ ์ํผ",
"lecturerName": "Georgeta",
"price": "70000"
}
]
}
์ด ๋ฐ์ดํฐ๋ฅผ ํ์ฉํ๊ธฐ ์ํด ๊ตฌ์กฐ ๋ถํด ํ ๋น ์ด์ฉํ์ฌ ์๋์ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํ์๋ค.
// ๋ฐฑ์์ ๋ฐ์ ๋ฐ์ดํฐ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถํด ํ ๋น
const data = lectureData.data;
const { lectureId, lectureTitle, lectureText, lecturerName, price, images } =
data[0];
ํ์ง๋ง ์ฝ๋๋ฅผ ์คํํด๋ณด๋ ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
Uncaught TypeError: Cannot read properties of undefined (reading '0')
undefined์ธ ๊ฐ์ ์ฝ์ ์ ์๋ค. ์ฆ, ๋ฐฑ์๋์์ ๋ฐ์์จ ๋ฐ์ดํฐ๊ฐ ๋ณ์์ ํ ๋น๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์๋ค.
๐ก ๋ฌธ์ ํด๊ฒฐ ๋ฐ ๊ณผ์
์ด์ ๋ ๋ชจ๋ฅด๊ฒ ์ผ๋, ๋ฐฑ์์ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์กฐ ๋ถํด ํ ๋นํ ๋, ์๋์ฒ๋ผ ๋ฐฐ์ด์ index ๊ฐ์ผ๋ก ์ ๊ทผํ๋ฉด ๊ฐ์ด ์ฝํ์ง์ง ์๋ ๋ฌธ์ ๊ฐ ์๊ธด๋ค๊ณ ํ๋ค.
const { lectureId, lectureTitle, lectureText, lecturerName, price, images } = data[0];
๋ฐ๋ผ์ ๋ฐฑ์์ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์กฐ ๋ถํด ํ ๋น ์, ๋ฐฐ์ด์ index๋ก ์ ๊ทผํ์ง ์๋๋ก ํด์ผํ๋ค.
ํ์ง๋ง ๋ฐฑ์์ ๋ง๋ ๋ฐ์ดํฐ์ ๋ฐฐ์ด ๊ตฌ์กฐ๊ฐ ๋ถ๊ฐํผํ๊ฒ ๋ค์ด๊ฐ์ผ ํ๋ ์ํฉ์ ์์ฃผ ์๋ค. ์ด๋ด ๋ ์ด๋ป๊ฒ ํด์ผํ๋๊ฐ?
๋ง์ผ ๋ฐ์ดํฐ์ ๊ผญ index๋ก ์ ๊ทผํด์ผ๋ง ํ๋ ์ํฉ์ด๋ผ๋ฉด setState์ Modifier ํจ์ ์ธ์ ๋ด๋ถ์์ (index๋ก) ์ ๊ทผํด์ฃผ๋ฉด ๋๋ค.
const ReservationPage = () => {
const [lectureData, setLectureData] = useState([]);
const [reservation, setReservation] = useState('');
const { lectureId } = useParams();
// ๋ฐฑ์์ ์ํ ๋ํ
์ผ ๋ฐ์ดํฐ ์์
useEffect(() => {
fetch(`http://10.58.52.141:3000/lectures/${lectureId}/reservations`, {
method: 'GET',
})
.then(response => response.json())
.then(data => {
// ์ด ๊ณณ์์ ์ธ๋ฑ์ค๋ก ์ ๊ทผํ๋ ๊ฒ์ OK
setLectureData(data.data[0]);
});
}, []);
// ๋ฐฑ์์ ๋ฐ์ ๋ฐ์ดํฐ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถํด ํ ๋น
const { lectureId, lectureTitle, lectureText, lecturerName, price, images } =
lectureData;
...
}
๐ฌ ๋๋ ์
๋ ผ๋ฆฌ์ ์ธ ์ ์ฐจ๋๋ก๋ผ๋ฉด ์๋ฌด๋ฐ ๋ฌธ์ ์์ด ์ฝ๋๊ฐ ์ ์์ ์ผ๋ก ๋์ํด์ผ ํ ํ ๋ฐ, ๊ทธ๋ ์ง ์์์ ์ฐธ์ผ๋ก ๋ต๋ตํ๋ ์๋ฌ์๋ค. ๋ฉํ ๋๋ ์ ํํ ์ด์ ๋ฅผ ๋ชจ๋ฅด์ จ๊ณ ๊ตฌ๊ธ๋ง์ ํด๋ด๋ ์ํ๋ ๋ต์ ์ป์ ์ ์์ด์ ์ฐธ์ผ๋ก ์์ฌ์ ๋ค.