React Import & Export

React Import & Export

React 에서 export 또는 import 를 사용할때는 javascrpit export, import 사용방법이 같다.

// data.js
let data = [
    {
        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 data;

src 폴더에 data.js 파일을 생성 한 후 export default 문법을 선언하여 외부에서 사용 가능하도록 한다.

 

import { useState } from "react";
import { Nav, Navbar, Container } from 'react-bootstrap';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import data from './data';	// import 를 선언하여 data.js 변수를 가져와 사용한다.

function App() {

  let [shoes] = useState(data);	// import로 받은 변수를 useState에 넣어 사용한다.

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark" >
        <Container>
          <Navbar.Brand href="#home">My Shop</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>

	  <div className='main-bg'></div>
      <div className='container'>
        <div className='row'>
          <div className='col-md-4'>
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
            <h4>{shoes[0].title}</h4> // shoes에서 가져온 데이터를 받아와 사용한다.
            <p>{shoes[0].content}</p>
          </div>
          <div className='col-md-4'>
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>{shoes[1].title}</h4>
            <p>{shoes[1].content}</p>
          </div>
          <div className='col-md-4'>
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>{shoes[2].title}</h4>
            <p>{shoes[2].content}</p>
          </div>
        </div>
      </div>
    </div>
  );
}


export default App;

 

data.js에서 받아온 데이터들을 사용 하여 import 한 후 불러왔다.

 

 

 

반응형

 

 

 

 

불러온 목록들을 컴포넌트로 만들어서 코드를 간략하게 만들 수 있다.

import { useState } from "react";
import { Nav, Navbar, Container } from 'react-bootstrap';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import data from './data';


function App() {

  let [shoes] = useState(data);

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark" >
        <Container>
          <Navbar.Brand href="#home">My Shop</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>

      <div className='main-bg'></div>

      <div className='container'>
        <div className='row'>
          
          // map을 사용하여 반복적으로 data를 불러온다.
          {
            shoes.map(function (item, idx) {
              return (
                <Item shoes={item} key={idx} idx={idx}></Item>
              )
            })
          }

          {/* <Item shoes={shoes}></Item> */}
        </div>
      </div>
    </div>
  );
}

// 컴포넌트로 생성하여 반복적인 부분을 줄일 수 있다.
function Item(props) {
  return (
    <div className='col-md-4'>
      <img src={'https://codingapple1.github.io/shop/shoes' + Number(props.idx+1) + '.jpg'} width="80%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
    </div>
  );

}

export default App;