-
Notifications
You must be signed in to change notification settings - Fork 17
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.
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
[김민희] sprint5 #81
The head ref may contain hidden characters: "react-\uAE40\uBBFC\uD76C-sprint5"
[김민희] sprint5 #81
Conversation
}; | ||
|
||
const [screenType, setScreenType] = useState( | ||
getScreenType(window.innerWidth) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useState(getScreenType(window.innerWidth)) 보다는 useState(() => getScreenType(window.innerWidth)) 로 변경하시는 것이 좋겠습니다. 전자는 리렌더링이 발생할 때 마다 getScreenType 함수가 실행되지만 후자는 첫 마운트 시에만 getScreenType이 실행됩니다.
import { FooterSection } from "../../components/FooterSection/FooterSection"; | ||
import "./MarketplacePage.css"; | ||
|
||
export function MarketplacePage() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
컴포넌트를 export 할 때는 export default 를 사용하는 것을 권장 드립니다. 그냥 export(named export)는 보통 하나의 파일에서 여러개의 export 가 있을 때 사용하는 의도가 있고 하나의 컴포넌트 파일에서는 컴포넌트만 내보내는 것이 유지보수상 간결하게 인지하기 쉽습니다.
clearTimeout(timeout); | ||
timeout = setTimeout(() => func(...args), delay); | ||
}; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
debounce 함수의 경우, useCallback 을 이용해서 리렌더링되어도 메모리를 그대로 유지할 수 있어야 합니다. 그래야 동일한 timeout id로 clearTimeout 을 실행시켜서, 사용자가 타이핑하는 동안에는 setTimeout 에 해당하는 51번 코드가 실행되지 않도록 취소시킬 수가 있습니다. 마찬가지로 debouncedLoadProduct 함수도 useCallback 사용해서 적용해보세요. 지금은 디바운싱이 아니라 타이핑하는 한글자한글자 마다 setTimeout 코드가 실행되고 있습니다.
반응형 요구사항을 잘 만족시켜주셨습니다. 페이지네이션의 경우 UI는 잘 나타내셨지만, 페이지버튼 클릭 시 서버요청과 리렌더링이 발생해야 하는데 이 부분은 동작하지 않으니 다시 한번 확인해보시면 좋겠습니다. 질문 주신 부분에 대해 아래에 통합 답변과 일부 코드에 코멘트를 적어드렸으니 확인해보시고 가능한 부분은 스스로 리팩터링 도전해 보시면 좋겠습니다. 고생하셨습니다. import { MarketplacePage } from "./pages/MarketplacePage/MarketplacePage"; 코드에서 바로 에러가 발생합니다. 개발모드에서는 소문자, 대문자가 틀려도 경로를 제대로 인식하는 경우가 있지만, 추후에 배포하거나 다른 누군가가 깃헙 클론받아서 실행했을 때는 경로를 찾지못하는 경우가 발생합니다. src/pages 폴더에는 말그대로 페이지 컴포넌트만 관리하는 것을 권장 드립니다. ProductList.jsx 는 페이지 컴포넌트가 아니므로 src/components/ 안에서 관리하는 것이 좋겠습니다. 가끔 발생하는 특수한 경우에 대한 조정의 경우 props 로 받고 기본값 설정만 해두시면 충분히 유연하게 재사용성 좋은 컴포넌트로 관리하실 수 있습니다. 물론 UI 스타일상 크게 상이한 경우는 재사용성만을 위해 알아보기 힘들게 관리하기보다는 별도의 컴포넌트로 분리하는 것 또한 의미있는 컴포넌트 분리라 할 수 있습니다. useScreenType 이라는 커스텀훅의 용도는 현재 화면크기가 모바일, 태블릿, 데스크탑인지에 따라 api 요청 시 한 페이지에 몇개씩 데이터를 가져올 것인지 pageSize 쿼리값을 분기처리하기 위한 용도로 사용되는 것이 과제 의도입니다. 모바일, 태블릿, 데스크탑 사이즈에 따라 몇 열로 리스트를 나타낼 지에 대한 레이아웃 처리는 useScreenType 에 의존하는 것이 아니라 미디어쿼리를 사용하는 것이 성능상 이점이 있습니다. html, css만으로 해결이 가능한 문제는 js를 사용하지 않는 것이 더 좋은 성능을 냅니다. |
배포 링크
https://panda-market-mhkim-react.netlify.app/
요구사항
기본
공통
중고마켓 페이지
심화
공통
중고마켓 페이지
스크린샷
멘토에게