[리액트] 코드 길어지면 import export 하면 됩니다

오늘 필요한 상품데이터

서버에서 상품데이터 가져와서 집어넣어주세요~~

 

상품데이터를 3개 준비해왔는데 이걸 html에 보여줍시다. 

하단 자료를 state에 보관해놓고 html에 데이터바인딩해보도록 합시다. 

실제 서비스였으면 서버 이런데서 받아왔겠지만 서버가 없으니 대충 서버에서 보낸 것이라고 생각합시다. 

 

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

어려워 보이지만 별거 아닌데 

[array자료]에 상품정보가 3개 들어있을 뿐입니다.

근데 상품정보가 너무 길고 복잡해서 {object자료} 에 넣어뒀을 뿐입니다. 

그래서 축약하면 [ { }, { }, { } ] 이렇게 생김 

 

 

object 자료가 무엇임???

 

여러가지 문자나 숫자를 한 변수에 보관하고 싶으면 array 쓰면 편하댔는데

object 써도 가능합니다. 

 

let user = { 'kim', 20 }

대충 이러면 user라는 변수에 'kim'과 20 둘 다 저장이 가능합니다. 

그리고 이걸 object 자료형이라고 합니다. 

근데 실은 object 자료는 자료들 왼쪽에 이름붙여야함 

 

 

let user = { name : 'kim', age : 20 }

자유롭게 'kim'과 20의 별명을 작명하면 됩니다.

array와 다르게 이쁜 별명붙여서 저장할 수 있는게 장점입니다. 

 

 

let user = { name : 'kim', age : 20 }
console.log(user.name)

원하는 자료만 꺼내고 싶으면 점찍고 별명부르면 됩니다. 

object 자료 다루는 법 끝

 

 

 

 

export default / import 문법

 

근데 위에 있던 상품정보들을 state로 만들고 싶은데 useState() 안에 넣기엔 너무 깁니다. 객체 안에 3개의 또 다른 객체들을 넣어야 하니깐 ...

그럴 땐 다른파일에 보관했다가 import해올 수도 있습니다. 

예를 들어서 data.js라는 파일이 있는데 거기 있던 변수를 App.js 에서 가져와서 쓰고 싶으면 

 

(data.js 파일)

let a = 10;
export default a;

export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있습니다. 

 

 

(App.js 파일)

import a from './data.js';
console.log(a)

export 했던 변수를 다른 파일에서 사용하고 싶으면

import 작명 from './파일경로' 하면 됩니다.

위 코드에선 a 출력해보면 진짜 10 나옴 

 

(유의점)

- 변수, 함수, 자료형 전부 export 가능합니다.

- 파일마다 export default 라는 키워드는 하나만 사용가능합니다.

- 파일경로는 ./ 부터 시작해야합니다. 현재경로라는 뜻임 

 

 

 

 

export { } / import { } 문법

 

여러개의 변수들을 내보내고싶으면 export default 말고 이런 문법을 씁니다.

 

(data.js 파일)

var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }

그럼 원하는 변수, 함수 등을 여러개 내보낼 수 있습니다.

 

 

(App.js 파일)

import { name1, name2 } from './data.js';

export {} 이걸로 내보냈으면 가져다가 쓸 때 import {} 문법을 씁니다.

 

(유의점)

- export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능합니다. export 했던 변수명 그대로 적어야함 

 

그래서 결론은

export default / import 쓰거나

export { } / import { } 쓰거나 둘 중 마음에드는걸 써봅시다. 

 

 

 

 

 

 

상품데이터도 다른 파일에 저장해두자

 

배웠으니까 활용해봐야합니다.

위에 있던 길고 복잡한 state를 다른 js파일에 저장해둔 뒤에

그걸 import 해와서 App.js의 useState 안에 넣어봅시다.

 

어떻게 하냐면??

 

 

(data.js 파일)

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

 

(App.js 파일)

import data from './data.js';

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

}

이런 식으로 썼습니다.

data.js 파일은 App.js와 같은 경로에 만들어서 경로는 그냥 ./data.js 인듯요 

a는 배열이고, b는 object 객체 자료형이다. 즉, data는 배열 내에 3개의 객체가 정의되어있는 것임.

 

 

 

상품데이터를 html에 데이터바인딩하기

 

여러분이 방금 import 해온건 상품 3개의 데이터입니다.

각각 상품의 제목, 설명, 가격 이런 것들이 들어가있습니다. 이걸 알맞은 자리에 데이터바인딩 해보도록 합시다.

 

function App(){
  let [shoes] = useState(data);
  return (
    <div className="App">
      (생략)
      <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>
            <p>{ shoes[0].price }</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
          <div className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
            <h4>상품명</h4>
            <p>상품정보</p>
          </div>
        </div>
      </div>
    </div>
  )
}

▲ 첫째 상품의 제목, 설명부분에 state에 있던 데이터를 넣어봤습니다. 

왜 저렇게 하면 상품명이 나오냐고요? 

강의를 참고합시다. 

 

상품명들이 3개 잘 나온다면 집가서 상단에 있는 오늘의 숙제를 하는데

아마 20시간 정도 걸리니까 시간 쏟아서 하도록 합시다. 

 

 

 

오늘의 숙제 :

1. 오늘 만든 상품목록을 컴포넌트로 만들어봅시다. 컴포넌트도 길면 다른 파일로 빼도 상관없음 

2. 컴포넌트만들면 그 안에 데이터바인딩도 아마 다시해야겠군요 

3. 반복적인 html이나 컴포넌트를 발견하면 연습삼아 map 반복문을 써봅시다. 

여태까지 배웠던거 복습이라 새로운거 없습니다 혼자 힘으로 하도록 합시다.