46일차(2)/React(10) : import, export 활용 예제(module)

46일차(2)/React(10) : import, export 활용 예제(module)

 

 

App09.js

//App09.js

//import
import React from "react";

//util은 object이다.
import util from "./my_modules/util";
import {num, name, isMan, myLongInformation as info} from './my_modules/member'

/*
import Home from './your_modules/Home';
import Game from './your_modules/Game';
import Study from './your_modules/Study';
*/

//폴더명으로 import해서 사용하면 index.js에서 export해준 자원을 사용할 수 있다.
import modules from './your_modules';

const App = ()=>{

    //import 된 object에 있는 함수 사용해보기
    util.drill();
    util.sender("hi");

    console.log(num);
    console.log(name);
    console.log(isMan);
    console.log(info);

    modules.Home();
    modules.Game();
    modules.Study();

    return(
        <div className="container">
            <h3>모듈 import, export 테스트</h3>

        </div>
    );
}

//export
export default App;

 

 

- 한 문서 내에서도 모듈을 export 하기도 하고, (밖으로 빼내는 것)

  모듈을 어딘가로부터 import 하기도 한다. (안으로 가져오는 것)

 

- index.js 에서도 우리가 작성하는 파일을 import 해서 가져오는 구조!

 

 

src 폴더 안에 my_modules 생성 > util.js 생성

//util.js

const drill = ()=>{
    console.log("구멍을 뚫어요!");
}

const sender = (msg)=>{
    console.log(msg+" 를 전송합니다.")
}

//2개의 함수를 object에 담아서
const obj={drill, sender}

//default로 export한다.
export default obj;

 

- 폴더의 util.js안에 2개의 함수가 존재한다.

 이것을 다른 js 파일에서 가져다 쓸 수 있을까?

 

- 이렇게 작성하는 것만으로는 가져다 쓸 수 없다.(util.js에 export가 없는 상태)

 

- App09에서 import해주는 과정뿐만 아니라, util에서 export 해주는 과정이 필요하다.

 

 

- import하는 이름은 마음대로 정하면 된다! import에서 .js도 생략 가능하다.

 

- export default drill, sender; 라고 쓸 수는 없다. 두 줄로 각각 export하도록 쓰는 것도 안된다.

- export default 로는 오직 하나만 빼낼 수 있다!!

→ 여러 개를 export 하고 싶다면? object에 담아서 빼내야 한다.

 

const obj={drill, sender}

export default obj;

- drill이라는 방에 drill을, sender라는 방에 sender를 담은 것 (object의 작성방법에 유의!)

 

- object로 담았기 때문에 util. 로 점을 찍어서 꺼내서 사용할 수 있다!

 

 

---

 

 

my_modules에 member.js 생성

//member.js

const num=1;
const name="바나나";
const isMan=false;
const myLongInformation={num:2, name:"딸기", isMan: true};

export {num, name, isMan, myLongInformation};

 

 

-  a.num으로는 나오지않는다. (export를 입력하지 않은 상태)

- 단순히 a.num / num / {num}으로는 import 되지 않는다

 

export {num, name, isMan};

- member.js 안에 외부에서 사용하고자 하는 모든 내용을 넣어서 export 해주어야 한다.

 

- import { } 에 가져다 쓰고싶은 내용을 전부 적어주기

 

- 쓰고자 하는 변수명이 너무 길 때는 이렇게 별칭을 줄 수 있다.(as : 앨리어스Alias)

 

 

- info에서 출력되는 내용은 object이다.

 

- 어떤 컴포넌트, 모듈에서 하나하나씩 필요한것만 import할 때는 { } 안에 넣어서 해주면 된다.

 

---

 

src에 your_modules 생성

- Home, Game, Study.js 파일생성

//Home.js

const home=()=>{
    console.log("집으로 가요!");
};

export default home;

 

 

- 여러개의 모듈을 좀더 편리하게 가져다 쓰기 위해서는?

→ 하나의 파일에서 일괄적으로 빼내서 쓰는 방법을 사용할 수 있다.

 

- index.js 라는 파일을 만들어 한곳에 넣어주기!!

//your_modules/index.js

//index.js 파일에서 필요한 모듈을 import 해서
import Home from "./Home";
import Game from "./Game";
import Study from "./Study";

//object에 담은 다음
let obj={Home, Game, Study}

//한번에 default로 export해주면 사용할때 폴더며으로 import해서 사용할 수 있다.
export default obj;

 

 

- 각각 home, game, study.js 에서 쓰려는 함수나 데이터를 가져와서 object 한곳에 담아준다.

 

- object로 가져오면 하나만 import해서 점을 찍어서 사용할 수 있는 구조

- modules.라는 변수명으로 import하기로 위에서 정했으므로, modules.Home(); 로 호출이 된다.

 

import modules from './your_modules';

- 폴더명까지만 적어도 해당 폴더 안의 index.js에서 사용할 수 있는 import된 것들을 불러와준다.

 

- 한번에 전부 호출되는 것을 볼 수 있다.