Conversation
…ithub-actions [Fix] delete merged branch github action
…상석-sprint1 [박상석]sprint1
…상석-sprint2 Basic 박상석 sprint2
src/components/page/ProductList.jsx
Outdated
| import axios from "axios"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| export default function ProductList() { |
There was a problem hiding this comment.
이 콤포넌트가 처리하고 있는 작업이 너무 많네요.
우선 큰 덩이로 쪼개본다면,
best products 보여주는 작업
검색된 products 보여주는 작업
- 검색 키워드 관리
- order by 관리
- pagination 관리
가 있는데요, 이 묶음에 맞춰 콤포넌트를 분리해보면 어떨까요?
| const [loading, setLoading] = useState(true); | ||
| const noImage = 'https://via.placeholder.com/222?text=No+Image'; | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
useEffect에게는 dependency 배열을 무조건 포함시켜주세요
src/components/page/ProductList.jsx
Outdated
| for (let page = 1; page <= totalPages; page++) { | ||
| const response = await axios.get(`https://panda-market-api.vercel.app/products?page=${page}&limit=10`); | ||
| allItems = allItems.concat(response.data.list); | ||
| } |
There was a problem hiding this comment.
존재하는 모든 페이지에 대한 정보를 받아와 client side 상태로 관리하려고 하시는거죠?
우선 이 경우, 여러개의 네트워크 통신을 동시에 처리하도록 하기 위한 더 적합한 방법들이 존재합니다.
또한 for loop는 내부에서 선언된 await의 완결을 보장해주지 않아서 오류 발생시 이를 판단할수 있는 방법이 없답니다.
따라서 api에 존재하는 page를 클라이언트측에서 요청하는 순간에 불러와 보여주는식으로 코드를 개편해보면 어떨까요?
|
|
||
| }; | ||
|
|
||
| async function BestItem() { |
src/components/page/ProductList.jsx
Outdated
| useEffect(() => { | ||
| const filter = item.filter((data) => | ||
| data.name.toLowerCase().includes(productSearch.toLowerCase()) | ||
| ); | ||
| setFilterItem(filter); | ||
| }, [productSearch, item]); |
There was a problem hiding this comment.
단순 필터된 값을 보여주는 작업이라면 useEffect에서 처리할 필요가 없어요.
어차피 상태로 관리되는 productSearch 텍스트가 변경되면 하위 요소들은 다 리렌더링 되거든요.
따라서 콤포넌트 안에서 filteredProducts = items.fitler... 해서 바로 꺼내주는식으로 처리해볼까요?
| const [error, setError] = useState(''); | ||
|
|
||
| //버튼 활성화, 비활성화 상태관리 | ||
| const [btnActive, setBtnActive] = useState(true); |
There was a problem hiding this comment.
버튼 활성상태를 굳이 state로 둘 필요는 없어보입니다
| const [ProductPriceValue, setProductPriceValue] = useState(''); | ||
|
|
||
| //태그 입력 상태관리 | ||
| const [ProductTagValue, setProductTagValue] = useState(''); |
| const [productNameValue, setProductNameValue] = useState(''); | ||
|
|
||
| //상품소개 입력 상태관리 | ||
| const [productIntroductionValue, setProductIntroductionValue] = useState(''); | ||
|
|
||
| //판매가격 입력 상태관리 | ||
| const [ProductPriceValue, setProductPriceValue] = useState(''); | ||
|
|
||
| //태그 입력 상태관리 | ||
| const [ProductTagValue, setProductTagValue] = useState(''); |
There was a problem hiding this comment.
이처럼 폼에 렌더되는 값들은 명확한 이유가 없다면 되도록 하나로 묶어 관리해주시는게 ㅍ ㅕㄴ할거에요
const [formValues, setFormValues] = useState({
name: '',
description: '',
price: 0,
tags: []
})| function handleInputValue(e) { | ||
|
|
||
| const { id, value } = e.target; | ||
|
|
||
| if (id === 'productName') { | ||
| setProductNameValue(value); | ||
| } else if (id === 'productIntroduction') { | ||
| setProductIntroductionValue(value); | ||
| } else if (id === 'productPrice') { | ||
| setProductPriceValue(value); | ||
| } else if (id === 'productTag') { | ||
| setProductTagValue(value); | ||
| } | ||
|
|
||
| } |
There was a problem hiding this comment.
하나로 묶어 폼 값을 관리한다면 다음고 같이 설정할 수 있겠죠
function handleValueChange(e) {
const [name, value] = e.target
setFormValues(prev => ({ ...prev, [name]: value })
}| //버튼 활성화, 비활성화 조건 체크 | ||
| useEffect(() => { | ||
| if ( | ||
| productNameValue.length > 0 && | ||
| productIntroductionValue.length > 0 && | ||
| ProductPriceValue.length > 0 && | ||
| ProductTagValue.length > 0 | ||
| ) { | ||
| setBtnActive(false); | ||
| } else { | ||
| setBtnActive(true); | ||
| } | ||
| }, [productNameValue, productIntroductionValue, ProductPriceValue, ProductTagValue]); |
There was a problem hiding this comment.
어차피 state가 변경되면 콤포넌트가 리렌더링 되게됩니다.
따라서 버튼 active 상태를 따로 관리하기보단, 버튼 콤포넌트에게
<Button
disabled={...}
/>
로 처리를 해주면 어떨까요?
There was a problem hiding this comment.
또한 오류 상태를 관리하는 방식도 같이 묶여서 개편해보면 어떨까요?
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React를 사용합니다
기본
심화
스크린샷
멘토에게
-https://codeit02-pandamarket.netlify.app/additem
-arrow function을 아직 사용 안 한 이유는 arrow function을 사용하기 전에 함수 선언식을 먼저 손에 익혀놓고 사용할려고 합니다
-현재 미션은 최대한 이해하고 코딩해봤습니다. 현재구조에서 실무적으로 어떤 식으로 코딩해 야 도움이 될지 피드백 부탁드립니다.
감사합니다.