React - Study

import , export 문법

---

🕵️ import , export 하기 다른 파일에서 변수를 가져올때 import , export 를 활용하여 다른파일에 있는 자료를 가져올 수 있다.

ex) 같은 폴더내에 App.js 와 data.js가 있다는 가정하에 예제를 만들어 import , export 하는 방법을 알아본다.

data.js

let 변수명 = 10; 을 만들어 놓고 하단에 export를 시킨다.
export default 변수명

🕵️ 1개 이상의 변수를 export 할 경우에는

let a = 10;
let b = 100;

export {a,b} 이렇게 변수명을 묶어서 export한다.

App.js

import 작명 from './data.js' 로 (사용하고싶은 작명을 사용하여 자유롭게 지정이 가능하다.) import 를 하고
필요한 곳에서 {작명} 작명을 불러주면 된다.

🕵️ 1개 이상의 변수를 import 할 경우에는
import {a,b} from './data' 이렇게 변수명 그대로 이름을 사용한다. 작명 불가능. 필요한 곳에
{a} , {b} 를 호출하여 사용가능

---

data.js

안에 배열을 만들어서

let data = [
    {
      id : 0,
      title : "타이틀1",
      content : "콘텐츠1",
      price : 100
    },
  
    {
      id : 1,
      title : "타이틀2",
      content : "콘텐츠2",
      price : 200
    },
  
    {
      id : 2,
      title : "타이틀3",
      content : "콘텐츠3",
      price : 300
    }
  ] 

  export default data;

🕵️ object 자료 :

• let a = ['kim',20] 👈 'kim'을 부르고 싶을때는 a[0]
• let b = {name : 'kim' , age : 20} 👈 'kim'을 부르고 싶을때는 b.name

App.js

App.js에서

import data from './data.js';

let [product] = useState(👉data) 로 import 가능

---

그 외에도 컴포넌트나 함수도 export가 가능하다.