데이터 모듈화

# 데이터를 모듈화해서 react에서 쓰면 편하다.

가뜩이나 react는 다 짬뽕되어있어서 복잡할텐데.. 이렇게쓰라고한다.

사실 이건 뭐 js기초문법인데 react에서 적용할겸 써본다.

 

 

# 데이터를 따로 js파일을 만들어서 넣어줬다.

파일 경로는 이렇게 생겼다.

products.js를 app.js경로와 같은위치로 만들어줬다.

여기 products.js에다가 어레이 자료로 상품정보를 넣어줄거다.

//products.js
const products = [
  {
    id: 0,
    title: 'White and Black',
    content: 'Born in France',
    price: 120000,
  },

  {
    id: 1,
    title: 'Red Knit',
    content: 'Born in Seoul',
    price: 110000,
  },

  {
    id: 2,
    title: 'Grey Yordan',
    content: 'Born in the States',
    price: 130000,
  },
];

export default products;

이렇게 products.js파일에 해당 어레이를 변수에 할당해주고

export해준다.

 

 

 

import products from './products.js';

app.js에서 임포트로 갖고올 수 있음.

 

const [shoes, setShoes] = useState(products);

app.js에서 이렇게 useState에 넣어서 변수 활용 가능.

처음에 난 shoes가 아니라 products로 해주려고 했는데 변수가 중첩되서 에러뜨더라.

 

또한 products.js에서 useState전체를 export해주려했는데 react hook인가 뭔 에러떠서 안됐음.

그냥 단순하게 어레이만 넣고 useState는 App.js에서 사용해야 함

 

 

 

++ 문제

난 템플릿 리터럴을 자주 사용한다.

여기서도

<Card.Img variant="top" src=`${data.src}` />

이렇게 쓰려 했는데 에러뜨더라. jsx문법에선 쓰면 안된다고함 ㅠㅠ 엄청 자주썼는데..

<Card.Img variant="top" src={data.src} />

이래 쓰란다.

 

vue에서처럼 :src이런게아니라 단순 중괄호에 박는거라 좀 편한거같으면서.. 아깝..

 

<Card.Img variant="top" src={`${data.src}`} />

억지로 써보려고 이래해봤는데 동작함.

 

 

 

# 후기

모듈화가 단순 데이터뿐아니라 저번에 고생했던 css모듈화나 컴포넌트도 다 나누고 이러면 좋을것같다.

배우겠지?

 

 

# 숙제

import './App.css';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import bg from './img/bg.png';
import Card from 'react-bootstrap/Card';
import { useState } from 'react';

import products from './products.js';

function App() {
  const [shoes, setShoes] = useState(products);

  return (
    <div className="App">
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">Muzzi</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Cart</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <div
        className="main-bg"
        style={{ backgroundImage: `url('${bg}')` }}
      ></div>

      <div className="img-box">
        {shoes.map((data, index) => {
          return <Product key={index} data={data}></Product>;
        })}
      </div>
    </div>
  );
}

const Product = ({ data }) => {
  return (
    <Card className="babo" style={{ width: '18rem' }} key={data.id}>
      <Card.Img variant="top" src={`${data.src}`} />
      <Card.Body>
        <Card.Title>{data.title}</Card.Title>
        <Card.Text>{data.content}</Card.Text>
        <Card.Text>{data.price}</Card.Text>
        <Button variant="primary">Buy</Button>
      </Card.Body>
    </Card>
  );
};

export default App;

Card를 컴포넌트화하고 데이터 props, 그리고 그걸 map으로 반복

 

 

key에다가 index넣어줘야함.