[리액트] mock data & fetch 메소드 활용

💡 mock data와 fetch 메소드를 이용해 인스타 게시글을 생성 해보겠다.
본 글은 게시글 이외의 컴포넌트, 태그들은 모두 생략하고 mock data와 fetch에 중점을 뒀다.

mock data란 BE의 API가 구성되기 전에 FE에서 독립적으로 data를 만들어 UI가 잘 구현되는지 확인하기 위한 data이다.

그럼 어떻게 활용할 수 있을까?

• api는 배열, 객체형태여서 key, value 설계 상태를 확인한다.
• 실제 통신시 백 개발자와 소통해 api구조를 확인한다.
• 실제 api는 통신으로 json 형태로 응답 받기에 mock data도 json 파일에 넣는다.
• api처럼 통신으로 응답 받아 구현하기 위해 public 폴더 아래 data폴더에서 데이터를 관리한다.

---

data.json 파일에 아래의 mock data를 넣어준다.

// public/data/data.json
[
  {
    "id": 1,
    "name": "loopy",
    "text": "hello",
    "likeNum": 30,
    "feedImg": "/images/Lim/loopy.jpeg",
    "profileImg": "/images/Lim/loopy.jpeg",
    "commentImg": "/images/Lim/crong.jpeg"
  },
  {
    "id": 2,
    "name": "crong",
    "text": "bye",
    "likeNum": 40,
    "feedImg": "/images/Lim/crong.jpeg",
    "profileImg": "/images/Lim/crong.jpeg",
    "commentImg": "/images/Lim/poby.jpeg"
  },
  {
    "id": 3,
    "name": "poby",
    "text": "nice to meet you",
    "likeNum": 50,
    "feedImg": "/images/Lim/poby.jpeg",
    "profileImg": "/images/Lim/poby.jpeg",
    "commentImg": "/images/Lim/loopy.jpeg"
  }
]

---

main 컴포넌트로 넘어간다.
렌더링이 다 끝난후 함수를 실행하기 위해 useEffect를 사용하고 의존성 배열로 빈배열을 줘서 최초 렌더링 시에만 함수가 실행된다.

fetch 메소드로 호출한다.
fetch 인자로 통신할 data파일의 경로를 적어준다.

• 첫번째 then은 메소드를 사용해 어떤 형태로 응답 본문을 처리할건지 정한다.(response.json() 일 경우 응답을 JSON 형태로 파싱한다.)
• 두번째 then은 인자에 배열 형태의 데이터가 들어있다. 따라서 feedInfoList에 set 해준다.

그리고 feedInfoList를 map을 통해 뜯어낸다. 그리고 뜯어낸 요소를 Article 컴포넌트에 전달한다.

//Main(부모) 컴포넌트
const Main = () => {
  useEffect(() => {
    fetch('/data/data.json')
      .then(response => response.json())
      .then(result => setFeedInfoList(result));
  }, []);

  const [feedInfoList, setFeedInfoList] = useState([]);

  return (
        <div className="feeds">
          {feedInfoList.map(feedInfo => {
            return (
              <Article
                key={feedInfo.id}
                name={feedInfo.name}
                text={feedInfo.text}
                likeNum={feedInfo.likeNum}
                feedImg={feedInfo.feedImg}
                profileImg={feedInfo.profileImg}
								commentImg={feedInfo.commentImg}
              />
            );
          })}
        </div>
		)}

---

자식 컴포넌트인 Article컴포넌트에서 받아 필요한 부분에 넣어준다.

//  Article(자식) 컴포넌트 인자
const Article = ({ name, text, likeNum, feedImg, profileImg }) => {...}

마치며

fetch 메소드와 data를 통해서 똑같은 컴포넌트를 복붙하고 컴포넌트에 개별로 다른 값을 일일이 수정하는 수고러움을 덜 수 있었다.
data의 값만 바꿔주고 요소만 추가 하므로 다른 내용의 같은 모양의 게시글을 생성하면서 Fetch 메소드, data의 필요성을 느꼈다.
그리고 BE에게 어떻게 요청하고 응답 받는지 조금이나마 알 수 있었다.

🚨우측의 스토리, 추천친구 항목도 mock data를 이용할 수 있으나 추후 수정 예정이다.