[솔로 프로젝트]

App.js

import React from 'react';

import Main from './page/Main';

import Product from './page/Product';

import { useEffect, useState } from 'react';

import "./App.css";

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Footer from './component/Footer';

function App() {

const [isProduct, setProducts] = useState([]);

useEffect(() => {

fetch('http://cozshopping.codestates-seb.link/api/v1/products?count=4')

.then(response => {

if (!response.ok) {

throw new Error(response.statusText);

}

return response.json();

})

.then(json => setProducts(json))

.catch(error => console.error(error));

}, []);

return (

<Router>

<div className='App'>

<Header />

<Routes>

<Route path="/" element={<Main isProduct={isProduct}/>} />

<Route path="/product" element={<ProductList />} />

<Route path="/bookmark" element={<BookmarkList />} />

</Routes>

<Footer />

</div>

</Router>

);

}

export default App;

 

Main.js

import Header from '../component/Header';

import Footer from '../component/Footer';

import { Link } from 'react-router-dom';

import { useEffect, useState } from 'react';

import Product from './Product';

export default function Main ( {isProduct} ) {

return (

<div className='main'>

<Header />

<div className='container'>

<Link to="/product">상품 리스트</Link>

<ul className='ProductList'>

{isProduct.slice(0, 4).map((obj, idx) => <Product obj={obj} key={idx} />)}

</ul>

<Link to="/bookmark">북마크 리스트</Link>

<Footer />

</div>

</div>

)

};

 

결국 리스트 불러오는 것도 구현하지 못했다.. useEffect 저 부분에서 잘 불러와지는데 Props를 제대로 이해하지 못한지라 ProductList와 Product를 하는데 애먹었다. 너무 부족하다고 느꼈고 이제 다음달이면 프로젝트 들어가는데 걱정이 앞섰다.. 그 전까지 개념을 정확히 이해하는게 중요한 것 같다. 멘붕과 자괴감이 많이 드는 시간이었다. 이번을 계기로 리액트를 다시 공부한다고 생각하고 부족한 부분을 채워야겠다.