데이터 분석 웹 서비스 2주차 회고 (04/26~04/30)

2주가 정말 금방 지났던 것 같다. 벌써 팀원들과 무척이나 친해져서 밤새 같이 코딩하다가도 회의랍시고 잡담으로 빠지는 경우가 수두룩 했지만 ㅋㅋㅋ 정말 너무너무 재미있었다!!! 

 

---

 

기능 구현 내용

• Boardgame 페이지 구현
• BoardgameData 컴포넌트 구현 : 보드게임 데이터 요청 후, BoardgameCard으로 데이터 전달
• BoardgameCategory 컴포넌트 구현 : 카테고리 조건 별로 데이터 요청
• BoardgameCard 컴포넌트 구현 : 보드게임의 대한 정보 렌더링 

 

Note. BoardgameData 컴포넌트 구현

• useState : 보드게임 데이터 저장
• useEffect : 보드게임 카테고리 조건 선택이 바뀔 때 실행할 함수
• conditionGamesHandler : 보드게임 카테고리 조건이 선택될 때 실행할 함수 ("games/conditions" 엔드포인트로 쿼리스트링 get 요청)
• boardgameList : useState로 받아둔 데이터들을 순회하여 각각의 정보를 BoardgameCard 컴포넌트로 렌더링

 

전체 코드

import React, { useState, useEffect } from "react";
import BoardgameCard from "./BoardgameCard";
import * as Api from "../../api";

function BoardgameData({ condition, changeCondition }) {
    const [boardgames, setBoardgames] = useState(undefined);

    useEffect(() => {
        conditionGamesHandler();
    }, [condition]);

    // 보드게임 조건 데이터 불러오기
    const conditionGamesHandler = async () => {
        try {
            await Api.getQuery(
                "games/conditions",
                {
                    params: {
                        category: condition.category,
                        val1: condition.val1,
                        type: condition.type,
                        page: condition.page,
                        perPage: condition.perPage,
                    },
                },
                { withCredentials: true }
            ).then((res) => {
                setBoardgames(res.data.games);
                setTotalPage(res.data.totalPage);
            });
        } catch (err) {
            console.log("errer message: ", err);
        }
    };

    const boardgameList = boardgames?.map((boardgame) => (
        <BoardgameCard
            key={boardgame?.game_id}
            id={boardgame?.game_id}
            name={boardgame?.game_name}
            min_player={boardgame?.min_player}
            max_player={boardgame?.max_player}
            theme={boardgame?.theme === null ? "" : boardgame.theme}
            image={boardgame?.image}
            min_age={boardgame?.min_age}
            complexity_average={boardgame?.complexity_average}
            min_playing_time={boardgame?.min_playing_time}
            max_playing_time={boardgame?.max_playing_time}
            favorite={boardgame?.favorite}
        />
    ));

    return (
        <>
            {boardgameList}
        </>
    );
}

export default BoardgameData;

 

결과 화면

보드게임 카테고리 화면