[React] 8. 다른 파일에서 데이터 가져오기 Kassid

728x90

이전 글 ▼

React에서 데이터를 다룰때 주로 state를 이용해서 원하는 위치에 바인딩한다.

하지만 서버에서 데이터를 가져오지 않고 App.js 내에서 다루기에는

데이터 양이 방대할 경우 src 폴더 내의 다른 파일에 그 내용을 저장한 뒤 가져올 수 있다.

1. export default / import

// src/data.js

let name = "KASSID";
export default name;

//App.js

import name from './data.js'

export default를 이용하는 이 방법은

하나의 객체를 내보낼 수 있다.

이때 가져온 데이터는 새롭게 작명할 수 있다.

(( 참고사항 ))

- JS의 객체(변수, object, 함수 등)라면 뭐든 export 가능

- 파일 당 export default는 1회만 가능

만약 여러개의 데이터를 보내고 싶은 경우엔 아래와 같이 사용한다.

// src/data.js

let name = "KASSID";
let home = "Bluishot-Star"
export {name, home};

// App.js

import {name, home} from './data.js'

이때 가져온 데이터는 새롭게 작명할 수 없다.

즉, export한 그대로 써야한다.

[React] 10. 라우팅-2 (useNavigate, 404page, Nested Routes, Outlet) (0)	2023.07.10
[React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link) (0)	2023.07.09
[React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기) (0)	2023.07.03
[React] CORS 에러 해결하기 (http-proxy-middleware) (0)	2023.06.30
[React] 6. props (0)	2023.05.29