'상품목록 Component화 + 반복문' 관련 질문입니다.

[김초연]

선생님 안녕하세요. 상품목록 component화 하고 반복문으로 만드는 거 숙제 내주신 거 혼자서 해보고, 강의를 들었는데 선생님 코드랑 약간 달라서 질문드립니다!

 

/* eslint-disable */

import React, { useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import './App.css';
import itemData from './data';

function App() {
    let [shoes, shoes변경] = useState(itemData);

    return (
        <div className='App'>
            <Navbar bg='dark' variant='dark'>
                <Container>
                    <Navbar.Brand href='#home'>ShoesMarket</Navbar.Brand>
                    <Nav className='me-auto'>
                        <Nav.Link href='#home'>Home</Nav.Link>
                        <Nav.Link href='#features'>Features</Nav.Link>
                        <Nav.Link href='#pricing'>Pricing</Nav.Link>
                    </Nav>
                </Container>
            </Navbar>
            <main className='main'>
                <section className='ad'>
                    <h2>20% Season Off</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </section>
                <div className='container'>
                    <div className='row'>
                        <Item shoes={shoes} />
                    </div>
                </div>
            </main>
        </div>
    );
}

function Item(props) {
    return props.shoes.map((shoe, index) => {
        return (
            <div className='col-md-4' key={index}>
                <img src={https://codingapple1.github.io/shop/shoes${index+1}.jpg} alt={${shoe.title} 상품 사진입니다} width='100%' />
                <h4>{shoe.title}</h4>
                <p>{shoe.content}</p>
                <p>{shoe.price}원</p>
            </div>
        );
    });
}

export default App;

 

위에는 제 코드인데, 저는 Item 함수 안에서 map 메서드를 사용했고, 선생님께서는 App 함수 안에 map 메서드를 사용하셔서 그 부분이 다릅니다. 저는 상품 리스트 전체를 하나의 컴포넌트로 생각해서 이렇게 코드를 짰는데, 이것보다는 선생님이 하신 것처럼 상품 하나를 컴포넌트 단위로 만들고 그걸 데이터 수만큼 반복해주는 게 더 좋은 방법일까요? 

[codingapple]

무엇을 컴포넌트로 만들지는 자유입니다

재사용할 UI 덩어리나 큰 페이지를 컴포넌트로 만드는게 좋습니다

상품하나 UI를 다른데서 쓸거 아니면 저것도 상관없습니다

[글쓴이]

글