Skip to content

refactor: #118/DonationsList의 데이터 불러오는 방식 변경 #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yoonc01 merged 2 commits into from
Feb 4, 2025
Merged

refactor: #118/DonationsList의 데이터 불러오는 방식 변경 #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd8a620
refactor: Change page data loading method for PC screen size
hyeonjiroh Feb 4, 2025
54b9806
design: Remove unnecessary background color
hyeonjiroh Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { StrictMode } from 'react';
// import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import '@/index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
// <StrictMode>
<App />
// </StrictMode>
);
33 changes: 8 additions & 25 deletions src/pages/listPage/DonationsList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import prevIcon from '@/assets/icons/prevIcon.svg';
import nextIcon from '@/assets/icons/nextIcon.svg';

function DonationsList({ onDonationClick }) {
const [history, setHistory] = useState([]);
const [items, setItems] = useState([]);
const [cursor, setCursor] = useState(0);
const [cursorArr, setCursorArr] = useState([0]);
const [isLoading, setIsLoading] = useState(false);
const [isPC, setIsPC] = useState(window.innerWidth >= 1200);
const observerRef = useRef(null);
Expand Down Expand Up @@ -38,46 +38,29 @@ function DonationsList({ onDonationClick }) {

const { list, nextCursor } = data;

// PC의 경우, 이전 페이지 데이터(history)를 저장
// 이전 페이지로 이동할 때는 새로 API 요청을 보내는 대신 저장된 데이터를 사용
if (isPC) {
setHistory((prevHistory) => {
const newHistory = [...prevHistory, { cursor, items }];
setItems(list);

return newHistory;
});
}

// PC가 아닌 경우, 무한 스크롤을 고려해서 새로 받은 데이터를 기존 데이터에 추가
if (!isPC) {
setItems((prev) => [...prev, ...list]);
}

setItems((prev) => (isPC ? list : [...prev, ...list]));
setCursor(nextCursor);
} finally {
setIsLoading(false);
}
};

const handleLoadPrev = () => {
// 현재 페이지 데이터 삭제 후 이전 페이지 데이터 가져오기
if (history.length > 1) {
const prevPage = history.pop();
setHistory([...history]);
setItems(prevPage.items);
setCursor(prevPage.cursor);
}
handleLoad({ cursor: cursorArr[cursorArr.length - 2] });
cursorArr.pop();
setCursorArr(cursorArr);
Comment on lines +50 to +52
Copy link
Owner

@yoonc01 yoonc01 Feb 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cursorArr.pop()으로는 cursorArr의 주소가 바뀌지 않아 setCursorArr(cursorArr)를 했을 때 리렌더링을 유도할 수는 없을 거 같아요!

리렌더링을 유도하지 않았더라도 cursorArr.pop()은 불변성을 훼손하기에 좋지 않은 거 같아요!

https://github.com/reactjs/react-basic?tab=readme-ov-file#state

리액트 컨트리뷰터가 작성한 글인데 state는 불변 데이터인 것이 상태 관리를 더 명확하고 예측 가능하게 한다고 해요!

그리고 위의 history.length > 1 조건처럼 cursor: cursorArr[cursorArr.length - 2] 에도 조건이 필요해 보여요! 그렇지 않으면 cursor=undefined로 전달되어서 멘토링 시간에 봤던 400 에러 발생할 거 같아요! 라고 했는데 잘 동작하네요?

const newCursorArr = cursorArr.length > 1 ? cursorArr.slice(0, cursorArr.length - 1) : [0];
handleLoad({ cursor: newCursorArr[newCursorArr.length - 1] });
setCursorArr(newCursorArr);

혹시 몰라 길이에 대한 처리도 했는데 바로 slice한 값을 넣어도 될 거 같네요!

Copy link
Collaborator Author

@hyeonjiroh hyeonjiroh Feb 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우와 감사합니다! 효준님께서 알려주신 방법으로 수정해봐야겠네요! 400에러가 발생하지 않고 잘 동작한 건 cursorArr의 배열에 0을 초기값으로 넣어줘서인 것 같습니다! 그리고 cursorArr의 길이가 1 이하이면 이전 버튼을 비활성화 시켜서 배열의 길이가 1 미만이 될 일도 없고요! 꼼꼼하게 봐주시고 피드백까지 정성스럽게 남겨주셔서 감사합니다~!

};

const handleLoadNext = () => {
setCursorArr((prev) => [...prev, cursor]);
handleLoad({ cursor });
};

// 화면 크기가 PC에서 Tablet, Tablet에서 PC로 변했을 때 가장 처음의 데이터들 보여주기
useEffect(() => {
setItems([]);
setHistory([]);
setCursorArr([0]);
handleLoad({ cursor: 0 });
}, [isPC]);

Expand Down Expand Up @@ -112,7 +95,7 @@ function DonationsList({ onDonationClick }) {
<button
type="button"
onClick={handleLoadPrev}
disabled={history.length <= 1} // 이전 데이터가 없으면 이전 버튼 비활성화
disabled={cursorArr.length <= 1} // 이전 데이터가 없으면 이전 버튼 비활성화
className="bg-deepCharcoal opacity-80 text-white pt-[28.5px] pb-[30px] px-[15px] rounded-lg shrink-0 hover:opacity-70 disabled:opacity-50"
>
<img src={prevIcon} alt="이전" />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/listPage/ListPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function ListPage() {
}[modalStep];

return (
<div className="min-h-screen bg-midnightBlack px-6 pc:px-0 relative">
<div className="px-6 pc:px-0 relative">
<img
src={leftTopGradient}
alt="leftTopGradient"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/notFoundPage/NotFoundPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PrimaryButton from '@/components/PrimaryButton';

function NotFoundPage() {
return (
<div className="min-h-screen flex flex-col justify-center items-center bg-midnightBlack font-pretendard">
<div className="min-h-screen flex flex-col justify-center items-center font-pretendard">
<div className="font-bold text-[50px] bg-gradient-to-r from-coralRed to-pinkPunch bg-clip-text text-transparent">
404
</div>
Expand Down