[React] import / export

▶ import  / export

변수나 함수를 다른 파일에 저장해두고 불러와서 사용할 수 있다

 

 

 

    ▷ data.js 에서 App.js로 변수나 데이터를 보내려면

 

1. data.js에서 원하는 데이터를 export 하고 (export default + 변수,함수,데이터)

export default 문법
(data.js 파일)
var mydata = 
'hong';
export default mydata;

2. App.js에서는 data.js를 import 하면 됨

import mydata from './data.js';

 

1. data.js

export default [
{
no : 1,
title : "리액트 책 추천",
name: "홍길동", 
content : "리액트를 다루는 기술"
},
{
no : 2,
title : "java 책 추천",
name: "김길동", 
content : "자바의 정석"
}
]

2. App.js 파일

import React, {useState} from 'react';
import Data from './data.js';
function App(){ 
let [memo, setMemo] = useState(Data);
return (
<div> ………. </div>
)
}

 

 

 

 

 

▶ export {} / import {} 둘은 짝꿍

    ▷ export {} 문법 => 여러개의 변수들을 내보내기

 

  - 여러 개의 변수들을 내보내려면 export default 대신 export {} 문법을 사용 (변수나 함수 모두 가능)

  - data.js ▽

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

=> 원하는 변수명, 함수명을 내보낼 수 있다

 

 

    ▷ import {} 문법

  - export {} 로 내보낸 변수들을 가져다 사용하려면 import {} 문법을 사용.

  - export 했던 변수명을 원하는 것만 쓰면 됨 

  - export 했던 변수명 그대로 써야 함 (export default 를 사용하면 배열로보내도, 이름을 다르게 import 로 받아도 문제가 없다)

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

 

 

 

 

---

★ 아주중요한 예제 ) 

 

 

 - app.js

import { react, useState } from "react";
import "./App.css";
import PdDetail from "./components/PdDetail";

function App() { 
  const [pd, setPd] = useState({
    pdName: "포테이토 피자",
    price: 10000,
    company: "피자집",
  });

  return (
    <div>
      <PdDetail pd={pd} />
    </div>
  );
}

export default App;

const [객체명,setter] ==> setter 이름은 set + 객체명 (카멜케이스)

가격은 number 니까 따옴표없이

pd = {pd} ==> props 로 넘기는 것

 

 

 

  - PdDetail.js

import React, { useState } from "react";
import Info from "./Info";

const PdDetail = ({ pd }) => {
  //const {pd} = props;
  const [detail, setDetail] = useState("맛있는 피자");

  return (
    <div>
      <h2>상품명 : {pd.pdName}</h2>
      <h2>가격 : {pd.price}</h2>
      <h2>제조사 : {pd.company}</h2>
      <Info detail={detail} /> //state 변수명
    </div>
  );
};

export default PdDetail;

{pd} 또는 (props) 로 app.js 에서 보낸 객체를 받을 수 있다

 

 

 

 - info.js

import React from "react";

const Info = (props) => {
  //let detail = props.detail;

  return (
    <div>
      <h2>상품상세 : {props.detail}</h2>
    </div>
  );
};

export default Info;

const Info =({detail}) 로도 값을 받을 수 있고, 위와같이 (props) 를 사용해도 됨