Conversation
junAlexx
added
순한맛🐑
| const [allItems, setAllItems] = useState([]); | ||
| const [order, setOrder] = useState('recent'); | ||
| const [page, setPage] = useState(1); |
| const handleLoadNext = () => { | ||
| if (allItems.length < 10) { | ||
| return; | ||
| } else { | ||
| setPage(page + 1); | ||
| } | ||
| }; |
There was a problem hiding this comment.
const handleLoadNext = () => {
if (allItems.length < 10) return;
setPage(page + 1);
};별건 아닌데 이러면 더 깔끔해보이지 않나요? ㅎㅎ
There was a problem hiding this comment.
너무 깔끔해보입니다. 사실 저도 이렇게 깔끔하게 만들고 싶은데,, 아직까지 처음 배웠던 코드 형식에서 벗어나지 못하는 것 같습니다. 차근차근 좋아지는 모습 보여드리겠습니다.
| const itemLoad = async (orderQuery) => { | ||
| const { list: nextItems } = await getData(orderQuery); | ||
| setAllItems(nextItems); | ||
| }; |
There was a problem hiding this comment.
이 함수는 useCallback으로 감싸든 아니면 useEffect 내부로 들어가는게 좀 더 좋아보이네요 ㅎ
| import Header from '../Components/Header/Header'; | ||
| import './App.css'; | ||
|
|
||
| const { list: bestItems } = await getData('favorite'); |
There was a problem hiding this comment.
이건 코드에 문제가 있어보이는데요? async로 감싸지도 않았는데 await을 사용하고있네요?
추가로 const [allItems, setAllItems] = useState([]); 이렇게 상태로 담지 않았는지도 여쭤보고싶네요
There was a problem hiding this comment.
async로 반드시 감싸지 않으면 안될까요?? 사실 async로 감싸려면 해당 부분을 함수로 만들어야 할 것 같은데,, 어떤 방향으로 코드를 작성해야할지 몰라서 일단 저렇게 만들었습니다. 그리고 왜 bestItems를 state로 만들어서 관리하지 않았냐라고 물으시는 거라면, 저는 베스트 아이템 부분이 고정된다고 생각해서 따로 만들지 않았습니다.
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
There was a problem hiding this comment.
의미없이 빈공간이 많네요 이런건 prettier나 eslint사용하면 바로 문제될 코드들이 많이 보이는데 둘다 세팅해보면 좋을것 같아요
There was a problem hiding this comment.
이상하네요, 작성할때는 이런 부분이 없었던 것 같은데, 한번 확인해보고 수정 반영하겠습니다.
| const handLoadMore = () => { | ||
| onLoadMore(); | ||
| }; |
There was a problem hiding this comment.
단순히 props로 받은 함수를 한번더 wrapping했을 뿐인데 의미가 없는것 같아요
There was a problem hiding this comment.
이 부분은 코드잇 강의 코드를 참조했습니다. 어떤 방향으로 작성하는 것이 더 좋을지 의견 주시면 감사하겠습니다.
| import heart from '../../../assets/ic_heart.svg'; | ||
| import '../BestItems.css'; | ||
|
|
||
| function BestItemList({ item, index }) { |
There was a problem hiding this comment.
index를 props로 넘기는데 사용하진 않고있네요
There was a problem hiding this comment.
맞습니다. 당시에는 index로 페이지 네이션을 만들 수 있을까를 고민하다가 포기하는 과정에서 빼지않은 것 같습니다. 수정 반영하겠습니다.
요구사항
기본
중고마켓
중고마켓 반응형
심화
주요 변경사항
스크린샷
멘토에게
API를 통해 데이터 fetch해서 렌더링하는 동작, 정렬에 따라 새롭게 데이터를 받아오는 동작, 가장 기초적인 페이지네이션
이 3가지에만 집중해서 최대한 노력했습니다. 저에게는 React가 너무 어려워서 이후 스프린트도 기한을 맞추긴 어려울 것 같습니다. 그래도 최선을 다하겠습니다.