data.js에 있는 데이터를 useState()에 담기. feat.map()

Q. 국가명과 도시명, 가격을 별도의 데이터파일로 저장하고, 이를 useState()에 담아 가져와 list를 작성해보자.

/* eslint-disable */
import { Navbar, Container, Nav } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="App">
      <div className="container">
        <div className="row">
          <div className="col-md-5">
            <img src="images/img1.jpg" width="100%" height="" />
            <h3>Africa, Sahara</h3>
            <p>4,500,000 won</p>
          </div>
          <div className="col-md-5">
            <img src="images/img2.jpg" width="100%" />
            <h3>Italy, Venice</h3>
            <p>2,000,000 won</p>
          </div>
          <div className="col-md-5">
            <img src="images/img3.jpg" width="100%" />
            <h3>Turkey, Cappadocia</h3>
            <p>3,560,000 won</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

1. 작명.js 파일을 생성하고 export 시킨다.

다른 컴포넌트에서도 사용할 수 있도록 export 선언해주고 그 안에 작성한다.

export/import 설명 ➯ 2021.10.30 - [react - 정리중/basic] - 내보내기 export /가져오기 import

export default [
    {
        "country" : "Africa",
        "city" : "Sahara",
        "price" : "4,500,000"
    },
    {
        "country" : "Italy",
        "city" : "Venice",
        "price" : "2,000,000"
    },
    {
        "country" : "Turkey",
        "city" : "Cappadocia",
        "price" : "3,560,000"
    }
]

2. import로 배열을 가져온다.

import itemList from './data';

3. useSate( )에 담는다.

let [items, itemsFunc] = useState(itemList);

useState() 설명 ➯ 2021.10.30 - [react - 정리중/basic] - props, 부모의 state를 가져와 보자.

4. map()으로 컴포넌트를 맵핑한다.

{
   items.map(function( item, i ){
      return (
         <div className="col-md-5" key={i}>
            <img src={"images/img"+ (i + 1) +".jpg"} width="100%" height="" />
            <h3>{ item.country }, { item.city }</h3>
            <p>{ item.price } won</p>
         </div>
      )
   })
}

map() 설명 ➯ 2021.10.30 - [react - 정리중/basic] - map & props 응용편

---

/* eslint-disable */
import { useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import './App.css';
import itemList from './data';

function App() {

  let [items, itemsFunc] = useState(itemList);

  return (
    <div className="App">
      <div className="container">
        <div className="row">
          {
            items.map(function( item, i ){
              return (
                <div className="col-md-5" key={i}>
                  <img src={"images/img"+ (i + 1) +".jpg"} width="100%" height="" />
                  <h3>{ item.country }, { item.city }</h3>
                  <p>{ item.price } won</p>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  );
}

export default App;

+ 별도 컴포넌트 함수로 분리했을 경우

/* eslint-disable */
import { useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import './App.css';
import itemList from './data';

function App() {

  let [items, itemsFunc] = useState(itemList);

  return (
    <div className="App">
      <div className="container">
        <div className="row">
          {
            items.map(function( item, i ){
              return (
                <Item item={ items[i] } i={i} key={i} />
              )
            })
          }
        </div>
      </div>
    </div>
  );
}

function Item(props){
  return (
    <div className="col-md-5">
      <img src={"images/img"+ (props.i + 1) +".jpg"} width="100%" height="" />
      <h3>{ props.item.country }, { props.item.city }</h3>
      <p>{ props.item.price } won</p>
    </div>
  )
}

export default App;