Mock 데이터가 다음과 같이 있습니다.
{
"getMovies": [
{
"movieName": "민환의 초상",
"movieNameInEnglish": "Minhwan's Portrait",
"movieSimpleDescription": "'민환의 초상'은 천재 예술가 민환의 인생과 작품을 그린 감동적인 인물드라마입니다.",
"movieThumbnailImageUrl": "https://github.com/jangjuseong/small_box-img-repo/blob/main/smallbox_%ED%8F%AC%EC%8A%A4%ED%84%B0%EC%83%98%ED%94%8C%2015%EC%A2%85/poster13.png?raw=true",
"movieOpeningDate": "2023-01-27T15:00:00.000Z",
"filmAgeRating": "12",
"movieKeyword": ["냉정한", "몽환적인", "역동적인"]
},
{
"movieName": "선키스드 드림",
"movieNameInEnglish": "Sun Kissed Dream",
"movieSimpleDescription": "'선키스드 드림'은 섬세하고 아름다운 로맨스 이야기입니다. 태양과 바다, 사랑 그리고 운명의 이야기를 담고 있습니다.",
"movieThumbnailImageUrl": "https://github.com/jangjuseong/small_box-img-repo/blob/main/smallbox_%ED%8F%AC%EC%8A%A4%ED%84%B0%EC%83%98%ED%94%8C%2015%EC%A2%85/poster12.png?raw=true",
"movieOpeningDate": "2023-01-29T15:00:00.000Z",
"filmAgeRating": "12",
"movieKeyword": ["희망적인", "낭만적인", "감성적인"]
},
{
"movieName": "방랑자",
"movieNameInEnglish": "Wanderer",
"movieSimpleDescription": "'방랑자'는 세상에서 외면받은 혼자서 살아가는 주인공이, 자신의 숨겨진 능력을 발견하게 되면서 벌어지는 모험을 그린 영화입니다.",
"movieThumbnailImageUrl": "https://github.com/jangjuseong/small_box-img-repo/blob/main/smallbox_%ED%8F%AC%EC%8A%A4%ED%84%B0%EC%83%98%ED%94%8C%2015%EC%A2%85/poster7.png?raw=true",
"movieOpeningDate": "2023-02-01T15:00:00.000Z",
"filmAgeRating": "18",
"movieKeyword": ["무서운", "냉정한", "불안한"]
},
{
"movieName": "바다의 흔적",
"movieNameInEnglish": "Deep Blue Sea",
"movieSimpleDescription": "'바다의 흔적'은 이야기꾼으로 유명한 주인공이, 세계 각지의 모험을 떠나며 발견하는 여러 비밀과 마주하는 모험을 그린 영화입니다.",
"movieThumbnailImageUrl": "https://github.com/jangjuseong/small_box-img-repo/blob/main/smallbox_%ED%8F%AC%EC%8A%A4%ED%84%B0%EC%83%98%ED%94%8C%2015%EC%A2%85/poster8.png?raw=true",
"movieOpeningDate": "2023-02-05T15:00:00.000Z",
"filmAgeRating": "12",
"movieKeyword": ["감동적인", "감성적인", "몽환적인"]
},
{
"movieName": "유령의 새벽",
"movieNameInEnglish": "Dawn of Ghosts",
"movieSimpleDescription": "'유령의 새벽'은 지하 도시에서 일어나는 이상한 사건들을 다룬 영화입니다. 이야기의 중심에는 한 여자의 이상한 꿈과 그 꿈에서 일어나는 일들이 포함되어 있습니다.",
"movieThumbnailImageUrl": "https://github.com/jangjuseong/small_box-img-repo/blob/main/smallbox_%ED%8F%AC%EC%8A%A4%ED%84%B0%EC%83%98%ED%94%8C%2015%EC%A2%85/poster2.png?raw=true",
"movieOpeningDate": "2023-02-09T15:00:00.000Z",
"filmAgeRating": "18",
"movieKeyword": ["웅장한", "불안한", "짜릿한"]
}
]
}
이 데이터를 fetch로 줍니다
const [movieChart, setMovieChart] = useState([]);
useEffect(() => {
fetch('/data/chartData.json', {
method: 'GET',
})
.then(res => res.json())
.then(data => {
setMovieChart(data.getMovies);
});
}, []);
이 데이터를 map으로 불러옵니다.
{movieChart.map(result => {
return (
<ChartBox>
<Image src={result.movieThumbnailImageUrl} />
<TextBox>
<Title>{result.movieName}</Title>
<Info>{result.movieSimpleDescription}</Info>
</TextBox>
<Btn>
<i class="fas fa-calendar-alt" />
<Ticketing>예매</Ticketing>
</Btn>
</ChartBox>
);
})}
이렇게 부른 데이터를 태그에 넣습니다 그려면 적용 끝!
참고로 fetch의 칸에는 서버와 연결할 주소를 넣으면 됩니다 http://는 필수.