5 글 보임 - 1 에서 5 까지 (총 5 중에서)
-
글쓴이글
-
2023년 12월 5일 18:43 #105988
남지윤참가자안녕하세요 선생님 궁금한 점이 생겨 질문드립니다..!
<App.js> function App() { let [product, setProduct] = useState([]); const Skin = lazy( () => import('./component/skin')) const Detail = lazy( () => import('./component/detail')) return ( <div className="App"> <Suspense> <Routes> <Route path='/'element={<Main product={product}/>}/> <Route path="/skin" element={<Skin product={product} setProduct={setProduct}/>}/> <Route path='/skin/:title' element={<Detail product={product}/>}/> <Route path='/cart' element={<Cart/>}/> <Route path='/body' element={<Body product={product} setProduct={setProduct}/>}/> <Route path='/body/:title' element={<Detail product={product}/>}/> <Route path='/hair' element={<Hair product={product} setProduct={setProduct}/>}/> <Route path='/hair/:title' element={<Detail product={product}/>}/> <Route path='/perfume' element={<Perfume product={product} setProduct={setProduct}/>}/> <Route path='/perfume/:title' element={<Detail product={product}/>}/> </Routes> </Suspense> export default App;---------------------------------------------------------------------------
<main.js> function Main() { let [product, setProduct] = useState([]); let [perfume, setPerfume] = useState([]); let [count, setCount] = useState(0); let [button, setButton] = useState(true); let [loding, setLoding] = useState(false); let navigate = useNavigate(); let [ref, inView]= useInView({ triggerOnce: false, threshold: 0.3, });useEffect(() => { axios.get(`https://raw.githubusercontent.com/JiyunNam0/frontend/main/aesop/skindata1.json`) .then((결과) => { let data = 결과.data;let filterData = data.filter(item => { return item.id >= 4 && item.id <= 7 });setProduct(filterData); console.log(filterData) }) .catch((error)=> { console.log('오류 발생' + error); }) }, [])}
function Best({product, i, navigate}) { return(<div className={styles.best_product_img_area}> < img src={product.images} onClick={() => { navigate(`/skin/${product.title}`) // 클릭시 detail 페이지로 상품 타이틀 전달 console.log(product.title) }} /> </div> <h4>{product.title}</h4> <p>{product.type}</p>) }
export default Main;
-----------------------------------------------------------------------
<detail.js>
function Detail({product}) {let navigate = useNavigate(); let {title: titleParam} = useParams(); let dispatch = useDispatch(); let findproduct; console.log(titleParam) // main.js 이미지 클릭시 들어온 타이틀이름 잘들어가있음 findproduct = product.find(function(x){ return x.title == titleParam });console.log(findproduct) // 여기서 undifined 가 콘솔창에 출력이됨
return( <> <Header navigate={navigate}/><div className={styles.detail_main}> {findproduct && ( <> <div className={styles.detail_img_area}> < img src={findproduct.images} alt="Product"/> </div> <div className={styles.detail_product_text}> {findproduct.sub} <h1>{findproduct.title}</h1> <h5>{findproduct.content}</h5> <p>{findproduct.price.toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })}</p> <button className={styles.add_cart_button} onClick={() => { if (findproduct) { dispatch(setProductDetail(findproduct)) }else { console.log('실패'); } }}> Add Cart </button> <div className={styles.product_detail}>export default Detail;
----------------------------------------------------------------
<skin.js>
function Skin({product, setProduct}) {let [loding, setLoding] = useState(false); let navigate = useNavigate(); let [firstBtn, setFirstBtn] = useState(true); useEffect(() => { setLoding(true); axios.get(`https://raw.githubusercontent.com/JiyunNam0/frontend/main/aesop/skindata1.json`) // main.js 마운트시 ajax보내지는 json데이터링크와 같음 .then((결과) => { let data = 결과.data; setProduct(data); setLoding(false); }) .catch((error) => { console.log('오류발생' + error); setLoding(false); }) }, []);return( <>
<div class={styles.next_page_button}> <button className={firstBtn ? styles.active : ''} onClick={() => { axios.get(`https://raw.githubusercontent.com/JiyunNam0/frontend/main/aesop/skindata1.json`) // main.js ajax 링크와 같음 .then((결과) => { let copy = [...결과.data]; setProduct(copy); }) }}>1</button> <button onClick={() => { axios.get(`https://raw.githubusercontent.com/JiyunNam0/frontend/main/aesop/skindata2.json`) .then((결과) => { let copy = [...결과.data]; setProduct(copy); setFirstBtn(false); }) }}>2</button></div> </div> </> ) }
function Product({product, i, navigate}) {return (
<div class={styles.skin_product_img_area} > < img src={product.images} onClick={() => { navigate(`/skin/${product.title}`) //이부분 상세페이지는 잘보임 }}/> {/* < img src={process.env.PUBLIC_URL + '/images/skinpage/skin' + (i + 1) + '.png'} /> */} <div className={styles.add_cart} > <button className={styles.add_button} onClick={() => { if (product) { dispatch(setProductDetail(product)) }else { console.log('실패'); } }}>Add Cart</button> </div> </div> <div class={styles.skin_img_text}> {product.sub} <p>{product.title}</p> {formattedPrice} </div>) }
export default Skin;
-----------------------------------------------------------------------------------------
>> 문제점 main.js[메인페이지] 마운트시에 main.js안의 코드인 <div className={styles.best_product_img_area}> < img src={product.images} onClick={() => { navigate(`/skin/${product.title}`) console.log(product.title) }} /> </div> 이부분에서 이미지 클릭시 해당 이미지의 detail 페이지가 보여지지 않고 main.js[메인페이지] 에서 skin.js를[스킨페이지] 방문하여 skin.js안의 useEffect 마운트가 되고나서 다시 main.js에 들어가서 <div className={styles.best_product_img_area}> < img src={product.images} onClick={() => { navigate(`/skin/${product.title}`) console.log(product.title) }} /> </div> 여기있는 이미지를 클릭시 해당 이미지의 detail 페이지가 잘 보이기 시작합니다...링크가 같아서 데이터가 늦게 보내지는건가 싶어서 제가 다시 main.js안의 ajax데이터 링크를 skin.js와 다른 링크를 사용해도 똑같은 상황이 발생합니다..ㅠ 그리고 navigate(`/skin/${product.title}`) 이부분이 문제인가 싶어서 navigate(`/${product.title}`)이렇게 바꾸고 App.js 에 있는 라우터도 <Route path='/:title' element={<Detail product={product}/>}/> 이렇게 추가해봤는데 잘 안되더라구요 비동기데이터처리가 메인페이지 로딩후 뒤 늦게 처리가 되서 메인페이지 이미지 클릭해도 데이터가 안들어가있어서 detail로 데이터가 전달이 안되는거 같은데 ㅠ main.js에 있는 문제의 useEffect를 App.js에 사용을 해서 product를 전달하는 방식으로도 시도를 해보았는데 이러면 skin 페이지가 마운트 되면서 product 내용을 업데이트 시키니까 main페이지에 있던 이미지들도 그 이미지들로 업데이트 되는 상황이 발생하더라구요..ㅜ 어떤게 문제인지 알고싶습니다,,ㅠ2023년 12월 5일 19:02 #105998
codingapple키 마스터/skin/1 방문시 Detail컴포넌트 보여주고 있는데 서버에서 데이터가져오는 코드는 Skin컴포넌트에 있어보입니다
-
글쓴이글
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
- 답변은 로그인 후 가능합니다.