[React] Mock 데이터 다루는 방법

bin·2023년 3월 3일
0

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://는 필수.

profile
프론트엔드부터 공부하고 있습니다

0개의 댓글