지출 내역 리스트 기능 추가하기 : 5 - 2

기존 지출 내역 리스트에 기능 추가하기

구현 순서

1. 회원가입, 로그인 페이지 및 폼의 UI 생성
2. jwt 인증서버를 사용한 회원가입, 로그인 기능 추가 및 인증 상태 관리
3. 내비게이션 바 생성 및 라우터 설정
4. 프로필 수정 페이지 생성 및 프로필 수정 기능 추가
5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현
6. 이후 디테일한 부분 및 선택 구현 사항 다루기

5. json-server와 Tanstack Query를 사용해 지출 CRUD 구현 - 2 (지출내역 불러오기)

지출 내역을 리스트로 보여주는 ExpenseList 컴포넌트에서 지출 데이터를 불러와 화면에 보여주기

src/components/ExpenseList.jsx

const ExpenseList = () => {
	// store에서 선택한 월을 가져옴
    const { selectedMonth } = useSelector(state => state.listMonth);

	// 데이터를 불러올 때는 useQuery 사용
    // 있으면 좋으니까 기본 제공 isPending, isError도 사용
    const { data: expenseList = [], isPending, isError } = useQuery({
        queryKey: ["expenses"],
        queryFn: fetchExpenses, // 불러오기 함수를 import
    });

	// 불러온 지출 리스트에 selectedMonth로 필터를 걸어서
 	// 선택한 월에 매칭되는 지출 데이터를 저장
    const selectedList = expenseList.filter(expense => expense.month === selectedMonth)

    if (isPending) return <div>Loading ...</div>;
    if (isError) return <div>데이터 조회 중 오류가 발생했습니다.</div>;

    return (
        <StSection>
            {
                selectedList.map(expense => { // 저장한 지출데이터를 화면에 보여줌
                    return (
                        <ExpenseItem
                            key={expense.id}
                            expense={expense}
                        />
                    );
                })
            }
        </StSection>
    )
}

그리고 지출데이터의 작성자도 화면에 보여주기 위해 ExpenseItem 컴포넌트 수정

src/components/ExpenseItem.jsx

<StDiv onClick={() => handleGoToDetail(id)}>
            <div>
                <StSpan>
                    {date}<br />
                </StSpan>
                <StSpan>
                    {item} - {longToShort(description)}<br />
                </StSpan>
            </div>
            <StSpanDiv>
                <StSpan>
                    {createdBy}님의 지출
                </StSpan>
                <StSpan>
                    {amount.toLocaleString()}원
                </StSpan>
            </StSpanDiv>
</StDiv>

결과

 

그냥 저장해놓은 함수 불러와서 useQuery에 queryFn에 넣어주면 불러오기 끝