react-mockデータによるページの実装(feat.FE&BEコミュニケーションの重要性)

6187 ワード
テキストリンク

  • 2つ目のプロジェクト돌하룻밤で숙소 리스트 페이지を担当

  • 寮情報を記録したリストが繰り返されるため、これらの情報を含むコンポーネントが作成され、寮情報は後でバックエンドからデータを受信するので、mock dataを作成してページを実現することにした.

  • 実装する前に、mock dataのkeyとvalue値をバックエンドと同じ値に最初から設定することが望ましい.

  • sprint会議の前にシミュレーションデータの例を作成し、「コンセプト」ページに共有して、会議時にチームメンバーと一緒にキーと値を決定します.


  • 指定したkeyとvalue値を使用すると、フロントエンドとバックエンドが簡単にタスクを完了し、通信も一度に成功します.

  • フロントとバックグラウンドのコミュニケーションの重要性を再認識しました.🥰
    • // Staylist.js
const Staylist = () => {
  const [placeList, setPlaceList] = useState([]);
  useEffect(() => {
    fetch('/data/PlaceList.json')
      .then(res => res.json())
      .then(data => setPlaceList(data));
...

return (
    <StaylistContainer>
      <Main>
        <StayPlace>
          {placeList.map(
            ({
              stayId,
              placeImages,
              description,
              placeName,
              adult,
              kid,
              pet,
              bed,
              bedRoom,
              bathRoom,
              stayService,
              price,
            }) => {
              return (
                <Placelist
                  key={stayId}
                  placelist={{
                    stayId,
                    placeImages,
                    description,
                    placeName,
                    adult,
                    kid,
                    pet,
                    bed,
                    bedRoom,
                    bathRoom,
                    stayService,
                    price,
                  }}
                />
              );
            }
          )}
        </StayPlace>
    [React] Hello world! feat. 🧐なぜ反応を書くのですか?
    標準1260 DFSとBFS JAVA