μνλ 무μμΈκ° ? UIμ λμ μΌλ‘ ννλ λ°μ΄ν°λ₯Ό μλ―Έν©λλ€.
Side Effect ? ν¨μ λλ μ»΄ν¬λνΈμ μ λ ₯ μΈμλ ν¨μμ κ²°κ³Όμ μν₯μ λ―ΈμΉλ μμΈμ λ§ν©λλ€. λνμ μΌλ‘ λ€νΈμν¬ μμ², API νΈμΆ
λ‘컬 μν
μ μ μν
μ μ μνμμμ λ°μ΄ν° 무결μ±
λ°μ΄ν° 무결μ±μ΄λ ? λ°μ΄ν°μ μ νμ±μ 보μ₯νκΈ° μν΄ λ°μ΄ν°μ λ³κ²½μ΄λ μμ μ μ νμ λμ΄ μμ μ±μ μ ν΄νλ μμλ₯Ό λ§κ³ λ°μ΄ν° μνλ€μ νμ μ³κ² μ μ§νλ κ²μ λλ€.
Props Drillingμ΄λ? μμ μ»΄ν¬λνΈμ stateλ₯Ό propsλ₯Ό ν΅ν΄ μ λ¬νκ³ μ νλ μ»΄ν¬λνΈλ₯Ό μ λ¬νκΈ° μν΄ κ·Έ μ¬μ΄λ propsλ₯Ό μ λ¬νλ μ©λλ‘λ§ μ°μ΄λ μ»΄ν¬λνΈλ€μ κ±°μΉλ©΄μ λ°μ΄ν°λ₯Ό μ λ¬νλ νμμ μλ―Έν©λλ€.
Props Drillingμ λ¬Έμ μ
ν΄κ²°λ°©λ²
μνκ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ°λ μ΄μ
App.js
function App() { const [items, setItems] = useState(initialState.items); const [cartItems, setCartItems] = useState(initialState.cartItems); return ( <Router> <Nav cartItems = {cartItems}/> <Routes> <Route path="/" element={<ItemListContainer cartItems = {cartItems} setCartItems = {setCartItems} items={items} />} /> <Route path="/shoppingcart" element={<ShoppingCart cartItems={cartItems} setCartItems = {setCartItems} items={items} />} /> </Routes> <img id="logo_foot" src={`${process.env.PUBLIC_URL}/codestates-logo.png`} alt="logo_foot" /> </Router> ); } export default App;
Nav.js
function Nav({cartItems}) { return ( <div id="nav-body"> <span id="title"> <img id="logo" src="../logo.png" alt="logo" /> <span id="name">CMarket</span> </span> <div id="menu"> <Link to="/">μν리μ€νΈ</Link> <Link to="/shoppingcart"> μ₯λ°κ΅¬λ<span id="nav-item-counter">{cartItems.length}</span> // cartItems.lengthμΌλ‘ μλ λ°κΏμ£ΌκΈ° </Link> </div> </div> ); } export default Nav;
ItemListContainer.js
function ItemListContainer({ cartItems, setCartItems, items }) { const handleClick = (e, index) => { let addNew = {}; addNew.itemId = index; addNew.quantity = 1; if(cartItems.length === 0) setCartItems([...cartItems, addNew]) for(let i = 0; i < cartItems.length; i++) { if(cartItems[i].itemId === index) { // μ₯λ°κ΅¬λμ μλ μμ΄ν μ μΆκ° setCartItems([...cartItems]) cartItems[i].quantity++ } else { // μ₯λ°κ΅¬λμ μλ μμ΄ν μ΄λ©΄ μλλ§ μΆκ° setCartItems([...cartItems, addNew]) } } } return ( <div id="item-list-container"> <div id="item-list-body"> <div id="item-list-title">μΈλͺ¨μλ μ λ¬Ό λͺ¨μ</div> {items.map((item, idx) => <Item item={item} key={idx} handleClick={handleClick} />)} </div> </div> ); } export default ItemListContainer;
ShoppingCart.jsconst handleQuantityChange = (quantity, itemId) => { const newCart = [...cartItems]; const idFilter = cartItems.findIndex(el => el.itemId === itemId); // newCart[μΈλ±μ€λ²νΈ]μ μλ = λ°μμ¨ μλ μΌλ‘ λ°κΏμ€λ€. newCart[idFilter].quantity = quantity; setCartItems(newCart); }
ShoppingCart.js
const handleDelete = (itemId) => { setCheckedItems(checkedItems.filter((el) => el.itemId !== itemId)) setCartItems(cartItems.filter(el => el.itemId !== itemId)) } // filterμ μ¬μ©νμ¬ el.itemIdμ ν΄λ¦λ itemIdκ°μ λΉκ΅ν΄μ κ°μ κ°λ§ μμ λλλ‘
κ³Όμ μ½λ μμ±νλ λΆλΆμ μΈν°λ·μ νμ λΉλ Έλ€. νΌμ μμ±ν΄λ³΄κ³ μΆμμ§λ§ λ체 λ μμ±ν΄μΌνλκ±΄μ§ λ§λ§ν μνμλ€. μ μΆνλ κ³Όμ κ° μλλΌ κ·Έλλ§ μ¬μ λ‘κ² λ κ³΅λΆ ν μ μλ κ² κ°λ€. λ΄μΌ 리λμ€λ₯Ό λ°°μ°λλ° λ¦¬λμ€ λΆλΆμ μ κΈ°μ΅νκ³ μ΄ν΄νλ©΄ λ κ² κ°λ€. κ°μΈμ μΌλ‘ λ§λ€κ³ μλ λ―Έλ νλ‘μ νΈμλ 리λμ€λ₯Ό μ¬μ©νκ³ μμ΄ λ°°μ°λ©΄ λ―Έλ νλ‘μ νΈμλ λμμ΄ λ κ² κ°λ€. 리μ‘νΈλ λ§€λ² μ΄λ ΅κ³ μλ‘λ€. 리μ‘νΈ μ½μ§ μλ€.. λ§λ§μΉ μμ λ μμ΄λ€..