Conversation
…Container로 state명 변경
There was a problem hiding this comment.
혜림님! 멘토링에서 이야기했던 내용들을 최대한 적용하려 하시는게 보이는 코드네요 ㅎㅎ
너무 고생 많으셨습니다.
이제 client side 상태들을 어떻게 효율적으로 관리할지, 데이터 모델링 차원에서의 고민이 필요한 상황으로 보이는데요, 그래도 되게 이런저런 시도들을 잘 해주셔서 금방 감을 잡으실것 같아요!
아마 내일 진행하는 멘토링에서 어느정도 설명을 드려 감을 잡으실 수 있으리라 생각해봅니다.
자세한 리뷰는 코드단에 남겨두었으니 한번 체크 부탁드릴게요. 고생 많으셨습니다!
| @@ -1,18 +1,22 @@ | |||
| { | |||
| "name": "sprint5", | |||
| "name": "pandamarket", | |||
| @@ -1,4 +1,4 @@ | |||
| async function productData({ orderBy, pageSize, search, page }) { | |||
| async function getProductData({ orderBy, pageSize, search, page }) { | |||
| const query = `page=${page}&orderBy=${orderBy}&pageSize=${pageSize}&keyword=${search}`; | |||
There was a problem hiding this comment.
query string은 URL Search Params를 사용해보면 어떨까요?
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
| @@ -1,4 +1,4 @@ | |||
| async function productData({ orderBy, pageSize, search, page }) { | |||
| async function getProductData({ orderBy, pageSize, search, page }) { | |||
| import { Outlet } from "react-router-dom"; | ||
|
|
||
| function App() { | ||
| return <Outlet />; |
There was a problem hiding this comment.
콤포넌트가 아니니 소문자로 파일 이름을 작성해볼까요?
| onChange={getEmailInfo} | ||
| required={emailRequiredChk ? true : false} | ||
| /> | ||
| <p className={styles.txtWarning}>{emailWarnMsg}</p> |
There was a problem hiding this comment.
에러 메시지가 있을 때만
태그를 렌더링하고 있어 좋은 접근이에요. 하지만 조건부 렌더링을 더 간단하게 작성할 수 있어요:
{errors.email && <p className={styles.txtWarning}>{errors.email}</p>}
{errors.password && <p className={styles.txtWarning}>{errors.password}</p>}
이렇게 작성하면 가독성이 조금 더 좋아질 거예요.
| const formattedPrice = item.price | ||
| .toString() | ||
| .replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
There was a problem hiding this comment.
오 좋은 방법이네요 ㅎㅎ
다만, number 데이터 타입에서 바로 이런식으로도 처리가 가능하답니다
const number = 1234567.89;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber); // Output: 1,234,567.89
| <ProductSearchForm | ||
| productList={productList} | ||
| setProductList={setProductList} | ||
| productContainer={productContainer} | ||
| setProductContainer={setProductContainer} | ||
| page={page} | ||
| setPage={setPage} | ||
| pageCount={pageCount} | ||
| setPageCount={setPageCount} | ||
| setIsDataCount={setIsDataCount} |
There was a problem hiding this comment.
오 좋은데요? 다만 productContainer가 활용되지 않는듯 한데 한번 체크가 필요해보여요.
| {productContainer.length !== 0 ? ( | ||
| productContainer.map((item) => { | ||
| return ( | ||
| <li key={item.id} className={styles.item}> | ||
| <GeneralItem item={item} /> | ||
| </li> | ||
| ); | ||
| })} | ||
| }) | ||
| ) : ( | ||
| <div className={styles.emptyList}> | ||
| <img src={notFoundImg} alt="Not Found" /> | ||
| <p>검색하신 상품을 찾을 수 없습니다</p> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
이렇게 분리해보면 좀 더 직관적일듯해요!
{productContainer.length === 0 && <EmptyPlaceholder />}
{productContainer.length > 0 && ... }
| // onKeyDown 이벤트 키가 Enter와 일치하면 실행 | ||
| const activeEnter = (e) => { | ||
| const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\+┼<>@\#$%&\'\"\\\(\=]/gi; | ||
| // onKeyDown 이벤트의 한글 입력 시 이벤트가 두 번 호출 되는 버그 방지 |
|
그리고 커밋 메시지 너무 잘 남겨주겨계셔서 좋습니다! 👍🏻 |
요구사항
스크린샷
멘토에게