import 해온 데이터로 데이터 바인딩

정보가 많은 데이터는?

저번 글에서 말한 것 처럼 따로 data들을 담아두는 파일을 만들고 export/import를 사용하면 된다고 했었다.

예를 들어

[
  {
    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
  }
] 

라는 데이터를 data.js 에 담아둬보자

• Export

let data = 위에있던 긴 array자료
export default data

• import

(App.js파일)
import data from './data.js'

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

위 단계를 거쳐 App.js에서도 data.js의 데이터들을 쓸 수 있다.

데이터 바인딩 과정

먼저 데이터의 생김새가 비슷하다.
그 말은 무엇일까? 생김새가 비슷한 html을 여러번 쓸 예정이고, 그 안에 데이터바인딩을 해줄 것이라고 생각을 할 수 있다.

그럴때 하는 것이 있다 예전에도 했던 것인데 바로
'컴포넌트'를 활용하는 것.

function Card(){
  return (
    <div className="col-md-4">
      <h4>상품명</h4>
      <p>상품정보</p>
    </div>
  )
}

이렇게 Card라는 컴포넌트를 만들었다.

위에서 만든 shoes라는 state를 APP말고 Card에서도 쓰고 싶으면 props 전송을 해주어야 한다.

Props 사용

(function App 내부)

<Card shoes={shoes}/>
<Card shoes={shoes}/>
<Card shoes={shoes}/>

이렇게 보내고

function Card(){
  return(
    <div className="col-md-4">
      <h4>{props.shoes[0].title}</h4>
      <p>{props.shoes[0].price}</p>
    </div>
  )
}

이렇게 props를 쓰면 된다.

하지만 지금 이 코드는 문제가 있다.
data는 3개를 가져왔지만 똑같은 카드가 3개가 보일 것이다.

3개 각자 다르게 보여주기

(function App 내부)

<Card shoes={shoes[0]}/>
<Card shoes={shoes[1]}/>
<Card shoes={shoes[2]}/>

function Card(props){
  return (
    <div className="col-md-4">
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.price }</p>
    </div>
  )
}

이렇게 해주면 각각 다르게 보여줄 수 있을 것이다.

그럼 data가 100개 있으면 컴포넌트를 100개를 써야하나?
그럴때 쓰는것이 또 map반복문이다.

Map함수로 반복해주기

보면 function App 내부에 똑같은게 반복되고 있는 것을 알 수 있다.

(function App 내부)

shoes.map(a,i)=>{
   return(
     <Card shoes={shoes[i]}/>
   )
}

이렇게 해준다면 map반복문을 통해
데이터바인딩을 해줄 수 있게 될 것이다.