[React] JSON 객체 안 배열 데이터 가져오기

API 대신 JSON으로 가데이터를 만들어서 axios를 직접 사용해봤다.

JSON파일을 처음만들어봐서 어렵다고 생각했는데 막상 직접 만들어보니 정말 별거 아니었다.

역시 직접 해보는 경험의 중요함을 느꼈다.

 

{
  "posts": [
    {
      "id": 1,
      "image": "이미지1",
      "place": "강릉",
      "title": "바다가 너무 예쁜 강릉~",
      "tag": ["맛집 탐방", "힐링", "친구와", "20대"],
      "startDate": "2023년 12월 23일",
      "endDate": "2023년 12월 26일",
      "budget": 100000,
      "comment": 20,
      "bookmark": true
    },
    {
      "id": 2,
      "image": "이미지2",
      "place": "서울",
      "title": "바다가 너무 예쁜 강릉~",
      "tag": ["맛집 탐방", "힐링", "친구와", "20대"],
      "startDate": "2023년 12월 23일",
      "endDate": "2023년 12월 26일",
      "budget": 200000,
      "comment": 30,
      "bookmark": true
    }
  ]
}

총 5개의 데이터를 만들었고 js랑 다른점은

속성과 데이터값이 모두 ""큰따옴표를 넣어주어야 하고

마지막 배열에는 쉼표를 제거해야한다.

 

public 폴더 안에 mock폴더를 만들어서 posts.json파일을 만들어 넣어주었다.

이 데이터는 API 대신 axios를 사용하여 호출한다.

 

fetch대신 axios를 사용하니, json파일을 따로 파싱하지 않아도 돼서 코드가 간결해졌다.

export async function getPosts() {
  try {
    const res = await axios.get('mock/posts.json');
    return res.data.posts;
  } catch (error) {
    console.error('Error: ', error);
    throw error;
  }
}

get 주소는 ('mock/posts.json')으로 작성하면 잘 불러와진다.

services 파일로 따로 구분을 해 주었다.

 

이 데이터는 mainPostItem 컴포넌트에서 사용해야한다.

 

import { useState, useEffect } from 'react';
import { getPosts } from '../../services/posts';
 
const [data, setData] = useState([]);

useEffect(() => {
    getPosts()
      .then((posts) => {
        setData(posts);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
}, []);

 

함수를 호출하고 useState를 만들어 저장할 데이터 상태를 만들어주었고, 처음에만 렌더링이 되도록 useEffect를 사용해서 최적화를 해 주었다.

여기서 tag 속성은 공통적으로 쓰이는 컴포넌트여서, 따로 컴포넌트로 제작하기 위해 data.tag를 불러왔지만 undefined가 뜨는 것이었다.

다른 데이터들은 전부 잘 불러와지는데 왜 tag만 안될까 고민을 하다가, 혹시 tag가 배열이어서 그런건 아닐까 하고 찾아봤다.

 

JSON 데이터에서 tag는 개별 게시물의 속성이고

data는 배열이며 각 요소는 개별 게시물을 나타내므로 data.tag가 정의되지 않는 것이었다.

data는 배열이므로 각 요소의 tag에 접근해야 했던 것이다.

 

console.log('tags',data.map((post) => post.tag),);

JSON 속성안의 배열 불러오기

 

이렇게 접근하였더니 태그가 모두 잘 불러와졌다.