[Justgram React] mock Data 활용해서 피드 구현하기(useEffect + fetch)

구현 목표

mock data를 활용하여 여러 개의 피드 구현

• mock data를 활용하여 데이터를 따로 분리해준 뒤 데이터 개수 만큼 피드를 구현

---

왜 mockData를 활용해야하는가?

피드를 여러개 띄우고 싶으면 <Feed/>를 여러번 복사하면 되지 않을까? 생각할 수도 있지만 그렇게 하면 데이터를 동적으로 다루고 props로 넘겨줘야할 때 굉장히 비효율적이기 때문에 우리는 mockData를 활용해야한다.

실습을 통해 연습해보자

---

1. Feed.json 파일 만들기

• public 폴더에 data 폴더를 만들고
• data폴더 안에 Feed.json파일을 만든다.

{
  "feedData": [
    {
      "feedId": 1,
      "username": "seeyong_0",
      "feedImages": [
        {
          "imgId": 105,
          "imgUrl": "/images/mycats.png"
        }
      ],
      "content": "귀여운 냥이들🐱💗"
    },
    {
      "feedId": 2,
      "username": "seeyong_0",
      "feedImages": [
        {
          "imgId": 106,
          "imgUrl": "/images/bibi.jpeg"
        }
      ],
      "content": "혀 넣는거 까먹은 비비👅"
    }
  ]
}

---

2. Main.js에 Feed데이터 가져와서 출력하기

1) Feed 데이터 state에 담아서 관리하기

function Main(){
	const [feeds, setFeeds] = useState([]);

  return(...)
}

2) useEffect+fetch를 통해 Feed.json 받아오기

function Main(){
  const [feeds, setFeeds] = useState([]);
	
  useEffect(() => {
      fetch("/data/feeds.json")
      .then((res) => res.json())
      .then((data) => {
        setFeeds(data.feedData);
      });
    });
  
  return(...)
}

• 데이터는 보통 첫 렌더링이 끝나고 가져오기 때문에 useEffect(()=>{},[])라고 표기해준다.
• fetch("/data/feeds.json") fetch 함수로 feed.json 파일을 받아온다.
• .then((res) => res.json()) response 객체를 json 형태로 바꿔준다.
• .then((data) => {setFeeds(data.feedData);}); feed.json의 데이터를 받아서 state에 넣어준다.
• ⚠️setFeeds(data)라고만 작성하면 오류가 뜬다! state 에서 배열로 받아오도록 했는데 data는 객체 형식이기 때문이다. data.feedData라고 작성해야 data안에 feedData 배열에 접근할 수 있다.

3) map함수를 활용하여 feeds state에 담긴 데이터들 출력하기

feeds 에 담긴 객체 하나 = 피드 한개 이므로 객체의 개수 만큼 피드들이 출력되어야 한다.

<div className="Feed-wrapper">
        {feeds.map((feed) => {
          return <Feed key={feed.feedId} feedData={feed} />;
        })}
</div>

• feeds state에 담긴 데이터들을 map함수를 통해 하나 하나 출력시켜보자
• <Feed key={feed.feedId} /> map함수를 돌리기 위해서는 key값이 있어야한다.
• 여기까지가 fetch 를통해 json에 있는 데이터를 불러오고 개수 만큼 피드를 생성하는 과정이다.
• 이제 feed에 들어갈 데이터를 컴포넌트에 넘겨줘야한다.
• <Feed key={feed.feedId} feedData={feed} /> feedData라는 이름으로 map함수로 받아온 feed를 props로 넘겨준다.

---

3. Feed.js에 feed 데이터 적용하기

1) Feed.js에 feedData 받아오기

function Feed({ feedData }){
  console.log(feedData)//feedData:{feedId:..}
	...
}

• Main.js 에서 에 넘겨준 feedData를 props로 받아왔다.

2) 필요한 곳에 데이터 하나씩 넣어주기

2-1) username

<div className="feed-header">
  <img src="/images/user.png" alt="user-profile" /> 
  {feedData.username}
</div>

• feed-header에 {feedData.username}로 username을 넣어줬다.

2-2) imgUrl 피드 이미지

<div className="feed-imag-container">
  <img src={feedData.feedImages[0].imgUrl}
    className="feed-img"
	alt="고양이>
  </img>
</div>

• {feedData.feedImages[0].imgUrl}feedImages도 배열로 되어있기 때문에 인덱스에 접근한 후 imgUrl에 접근해야한다.

2-3) content 피드 글

<div className="feed-content-container">
  <span>{feedData.content}</span>
</div>

---

4. 정리

1) Main에서 Feed의 정보를 받아오고
2) state를 통해서 받아온 정보를 저장하고
3) map함수로 저장한 정보를 가지고 동적으로 컴포넌트를 여러개 그리고
4) 그릴 때 마다 하나의 컴포넌트에 저장한 정보를 props로 넘겨줘서 feed를 완성했다.