[React]코드가 길어지면 import export하자

데이터가 많다면?

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

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

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

 

 

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

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

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

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

 

 

 

 

export default / import 문법

근데 위에 있던 상품정보들을 state로 만들고 싶은데 useState() 안에 넣기엔 너무 깁니다.

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

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

 

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

 

 

 

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

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

 

 

 

(유의점)

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

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

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

 

 

 

 

 

export { } / import { } 문법

 

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

 

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

 

 

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

 

 

(유의점)

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

 

 

그래서 결론은

export default / import 쓰거나

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

 

 

 

<출처 : 코딩애플 : React 리액트 기초부터 쇼핑몰 프로젝트까지!>