card 컴포넌트 만들기

[박땡땡]

/* eslint-disable */
import { useState } from 'react';
import { Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap';
import bg from './bg.png';
import './App.css';
/* import a from './data.js' */
/* import {a, b} from './data.js' */
import data from './data.js'

function App() {
let [shoes] = useState(data);

return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#cart">Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
 
<div className="main-bg" style={{ backgroundImage: `url(${bg})` }}></div>
<Container>
<Row>
<Card shoes={shoes}></Card>
</Row>
</Container>
</div>
 );
}
function Card(props){
let shoeslist = props.shoes;
return(
shoeslist.map(function(a, i) {
return(
<Col key={i}>
<img src={process.env.PUBLIC_URL + `/shoes${i+1}.jpeg`} width="80%"/>
<h4>{shoeslist[i].title}</h4>
<p>{shoeslist[i].content}</p>
</Col>
 )
 })
 )
}
export default App;

선생님 저는 이렇게 했는데 정상적으로 나오더라고요 ㅠㅠㅠ...

제가 궁금한 점은

1. 선생님처럼 card 컴포넌트를 3개 만들어주는 것이 아니라,
card 컴포넌트 안에서 bootstrap col 컴포넌트를 데이터 배열 갯수만큼 반복문 돌려주는 방식은 잘못된건지 궁금합니다 ㅠㅠ

-------------------------------------------------------------------------------------------------------------

컴포넌트를 외부로 빼는 방식

파일명: App.js

/* eslint-disable */
import { useState } from 'react';
import { Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap';
import bg from './bg.png';
import './App.css';
/* import a from './data.js' */
/* import {a, b} from './data.js' */
import data from './data.js'
import Card from './card.js'

function App() {
let [shoes] = useState(data);

return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#cart">Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
 
<div className="main-bg" style={{ backgroundImage: `url(${bg})` }}></div>
 
<Container>
<Row>
<Card shoes={shoes}></Card>
</Row>
</Container>
</div>
 );
}
export default App;


파일명: card.js

import { Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap';

export default function Card(props){
let shoeslist = props.shoes;
return(
shoeslist.map(function(a, i) {
return(
<Col key={i}>
<img src={process.env.PUBLIC_URL + `/shoes${i+1}.jpeg`} width="80%"/>
<h4>{shoeslist[i].title}</h4>
<p>{shoeslist[i].content}</p>
</Col>
 )
 })
 )
}

2. 만약 card 컴포넌트를 export해서 App.js 로 import 하는 방식을 만든다면, 이렇게 하는게 맞을까요? 제대로 한게 맞는지 봐주시면 감사하겠습니다,
그리고 card export js 파일 안에도 부트스트랩 import { Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap'; 이걸 안에 반드시 import 해줘야 하는건가요??

 

[codingapple]

뭘 컴포넌트로 만들지는 본인 마음입니다 
컴포넌트 안의 html은 하나의 태그로 묶어야합니다 
react-bootstrap이 Card.js에서 필요하면 import해서 쓰면 됩니다 

[글쓴이]

글