import/export

• import와 export는 템플릿 내부에서 데이터를 연결시키는 기능이다.

export default [
        {
            id : 0,
            title : "White and Black",
            content : "Born in France",
            price : 120000
        },
        ]

• 위처럼 뽑아내고 싶은 데이터를 export 처리하고

import Data from './data';

• main.js 파일에 import 시켜주면 저 데이터를 쓸수 있다.

Component

• react에서는 반복되는 구조가 많기에 component를 만들어 두면 클린코딩을 할수 있다.

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

• 위 코드는 Item창을 만들기 위해서 만든 코드
• props는 데이터 바인딩 할 때 쓰인다.

<Item sub={subject}><Item/>

• 이렇게 써주면 사용할 수 있다.

Map

• react에서 반복을 처리할때 쓴는 메서드

{
            shoes.map(
                (shoe) => {
                  return(
                      <Item sho={shoe}></Item>
                      )
                }
            )
          }

• 위 코드는 아까 만든 Item을 shoes 배열의 갯수만큼 반복해주는 편리한 기능이다.
• 이렇게 사용한다면 데이터 바인딩이 깔끔하다.