이번 프로젝트는 상품의 옵션을 설정하고 등록 또는 삭제하는 기능을 진행하게 되었는데 그중에 상품 옵션 설정 기능을 담당하였다. 간단할 것 같으면서도 복잡한 프로젝트였다. 개인적으로 삽질하는 시간이 많았고 아쉬움이 남은 프로젝트이다.
첫 시작 때 전체적인 설계 구조를 잡는 데에 있어서 미흡한 부분이 있었다. 이번 설계는 나중에 필요한 기능을 구현하는 데에 있어서 큰 어려움을 주었다.
대표적으로 옵션 세트 추가했을 때 새로운 컴포넌트를 생성하고 삭제하는 부분에서 큰 시간을 들였다.
이번 과제에서 부족했던 부분은 각각의 컴포넌트끼리 서로 어떻게 서로의 데이터를 주고받을 것인지에 대한 설계가 부족했다. 가장 기본적인 부분이었는데 여러모로 아쉬움이 많다. 앞으로 남은 프로젝트 동안 실수를 줄이도록 더욱 신경 써야겠다.
Input 란에 사용자가 값을 입력하면 그 값을 저장할 공간이 필요하다.
productForm.js에서 공간을 만든다.
productForm.js
export const default_productform = {
id: 1,
name_product: '',
price_nomal: '',
price_sale: '',
product_inven: '',
};
export const default_option_list = ['제품명', '제품정상가', '제품판매가', '재고'];
ProductInfo라는 새로운 컴포넌트를 생성한다. 이 컴포넌트에서는 버튼을 클릭했을 때 상품 옵션 카드가 생성될 수 있도록 동작한다.
const [cardList, setCardList] = useState([default_productform]); <-- Input 데이터를 위한 객체 값을 기본값으로 설정.
const addCard = () => {
let id = cardList[cardList.length - 1].id;
let temp = [...cardList].concat({ ...default_productform, id: id + 1 });
setCardList(temp);
};
<div>
{cardList.map((card, idx) => {
return (
<Infocard
key={idx}
cardList={cardList}
setCardList={setCardList}
card={card}
></Infocard>
);
})}
<button className='infocard-add-btn' onClick={addCard}>
+ 옵션 세트 추가
</button>
<div/>