가져오기, 내보내기 [패스트캠퍼스 챌린지 09일차]

기본 통로 | 이름 지정 해도 그만 안 해도 그만

---

Default export

기본 통로 즉, default 통로로 데이터가 나가면 
이름을 따로 지정할 필요가 없음 (지정해도 상관 없음)
그리고 import로 가지고 와서 활용할 때도 
언제든지 이름을 다른 걸로 지정해도 전혀 문제 없다

export부터

 - 기본 통로로 빠져나가는 데이터는 따로 이름을 활용하는 게 아니기 때문에
   main.js에서 import로 불러올 때도 이름을 꼭 사용할 필요 없음
   대신 main.js에서 import 뒤에 내가 원하는 이름을 붙여 활용할 수 있음

// 파일명 getType.js
export default function getType(data) { //함수명 getType 지워도 노 상관
return Object.prototype.toString.call(data).slice(8, -1);
} 

• 함수명을 지워보자

    ```jsx
    // 파일명 getType.js
    export default function (data) {
      return Object.prototype.toString.call(data).slice(8, -1);
    }
    ```

import

• import는 js문서 상단에 작성해주기
• export default를 통해 불러온 거라서 내가 원하는 이름을 붙여 사용 가능

/* 
import 원하는이름 from './getType'
console.log(원하는이름([1,2,3])) 
*/

import testType from './getType' // getType.js

console.log(testType([1,2,3])) // Array

---

이름 지정 통로 | 이름 지정 해야 함

---

내보내기

• default 작성하지 않음 → 이름 필요

// 파일명 getRandom.js
export function random() {
return Math.floor(Math.random()*10)
}

가져오기

• 함수명을 중괄호로 감싸주자

import { random } from './getRandom'

console.log(random(),random())

데이터 하나 이상 내보내고 가져오는 방법

내보내기

// 파일명 getRandom.js
export function random() {
return Math.floor(Math.random()*10)
}
export const user = {
    name : 'Kiwi',
     age : 99
}

가져오기

import { random, user } from './getRandom'

console.log(random(),random())
console.log(user)

함수명 바꾸기도 가능

객체구조분해 기억나나? 콜론 기호 썼었는데...
여기서는 as 써야 함. 콜론 아님.

// import { random, user } from './getRandom'
import { random, user as myUser } from './getRandom'
/*해석. 꺼내올 때는 user라는 이름으로 꺼내오지만
활용할 때는  myUser로 활용하겠다*/

console.log(random(),random())
console.log(myUser)

함수 두 가지를 한번에 가져오는 방법

• 에스터리스크 사용

와일드카드 (Wildcard Character, *) 는 여러 내용을 한꺼번에 저장할 목적으로 사용하는 기호를 가리킴

/* 원래 내용
import { random, user as myUser } from './getRandom'
*/
import * as AnyName from './getRandom'
// 여기서 에스터리스크는 모든 내보내기 되는 데이터를 의미함
console.log(AnyName)

• 위의 방법에서 default 방식까지 추가 가능

  위의 두 방식이 대립되는 내용처럼 보이지만 결국엔 하나의 자바스크립트에서 두 개의 통로를 다 쓸 수 있는 거임

---

위의 두 방식의 가장 큰 차이점!

기본 통로 default

기본 통로는 한 파일에서 하나의 데이터만 내보낼 수 있음

(둘 이상의 데이터를 넣으면?)

에러 뜸.
Only one default export allowed per module

이름 쓰는 통로

이름을 지정해야 하는 내보내기는
이름만 지정되어 있으면 몇 개를 내보내도 상관 없음

---

노션에서는 저렇게 깔끔한데
옮기면 갬성 무너지네

---

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online