공부방
import / export 본문
object 자료형
let user = { name : 'kim', age : 20 }
- 자료들 왼쪽에 이름을 붙여야됨
- user라는 변수에 'kim', 20 둘 다 저장이 가능
- array와 다르게 이름 붙여서 저장할 수 있는게 장점
- 원하는 자료를 꺼내고 싶다면 점 찍고 이름 부르면 된다.
- ex) user.name
export default / import
(data.js 파일)
let a = 10;
export default a;
(App.js 파일)
import a from './data.js';
console.log(a)
- data.js라는 파일에 데이터들을 저장해두고 App.js에서 가져와서 쓸 수 있다.
- export default 변수명;
- 원하는 변수를 밖으로 내보내기
- export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'
- 변수, 함수, 자료형 전부 export 사용 가능
- 파일마다 export default 라는 키워드는 하나만 사용 가능
- 파일 경로에서 ./->현재 경로 라는 뜻
export {} / import {}
(data.js 파일)
var name1 = 'Kim';
var name2 = 'Park';
export { name1, name2 }
(App.js 파일)
import { name1, name2 } from './data.js';
- 여러 개의 변수, 함수 등을 내보내고 싶을 때
- export {}로 내보냈다면 가져다 쓸 때 import {}로 써서 가져옴.
- export {} 했던 것들은 import {} 쓸 때 자유작명이 불가능. export 했던 변수명 그대로 써야됨
데이터 가져와보기
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;
(App.js 파일)
import data from './data.js';
function App(){
let [shoes] = useState(data);
}
상품데이터를 html에 데이터바인딩
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>
)
}
'React' 카테고리의 다른 글
XML 파싱 (0) | 2024.09.20 |
---|---|
Card 컴포넌트 만들고 props, map (0) | 2024.08.17 |
이미지 넣는 법 & public 폴더 이용하기 (0) | 2024.07.28 |
CSS 라이브러리 사용하기(React-BootStrap) (0) | 2024.07.27 |
날짜값 바꾸기 (0) | 2024.06.21 |