오늘의집 클론코딩 컴포넌트끼리 값 전달하기
[storeManagement.js] 코드 일부
import React, {useEffect, useState} from 'react';
import ProductManagement from "./productManagement";
import InfoUpdate from "./infoUpdate";
import { SidebarItem } from './sidebarItem';
import '../css/store.css';
import StoreInventory from "./store_inventory";
import StoreProduct from "./store_product";
import StoreStatus from "./store_status";
function StoreManagement() {
const [productInfo, setProductInfo] = useState(null);
const [productCount, setProductCount] = useState(null);
// 상품 리스트 불러오기
const fetchProductInfo = async (storenum) => {
try {
const response = await fetch(`http://localhost:80/product/productList?storenum=${storenum}`, {
method: 'GET'
});
if(response.ok){
const data = await response.json();
setProductInfo(data);
}else {
console.error('Failed to fetch user info');
}
} catch (error) {
console.error('Error fetching user info:', error);
}
};
// 상품 개수 불러오기
const fetchProductCount = async (storenum) => {
try {
const response = await fetch(`http://localhost:80/product/productCount?storenum=${storenum}`, {
method: 'GET'
});
if(response.ok){
const data = await response.json();
setProductCount(data);
}else {
console.error('Failed to fetch user info');
}
} catch (error) {
console.error('Error fetching user info:', error);
}
};
<중략>
<section className="store-content-section store-item">
{/*컴포넌트에 값 전달*/}
{activeMenu === "상품 관리" && <StoreProduct productcount={productCount} productinfo={productInfo}/>}
{activeMenu === "재고 관리" && <StoreInventory />}
{activeMenu === "매출 현황" && <StoreStatus />}
{activeMenu === "정보 변경" && <InfoUpdate />}
</section>db에서 저장한 값을 storeManagement.js 컴포넌트에서 매개변수에 저장시켜주고 store_product.js 컴포넌트로 전달하기 위해 store_product.js를 StoreProduct로 임포트 시켜주고 컴포넌트를 불러온다.
