📍 오늘배운 내용

• 이후에 react를 배울때 나오는 컴포넌트라는 개념을 위해서는 import, export 을 어떻게 사용하는지 알아야한다!
• 클래스형 컴포넌트보다 함수형을 더많이 사용하지만 Class 사용법을 알고있자

1️⃣ import, export

• https://caniuse.com/ > import 지원 여부
• export 는 public 함수 (외부에서도 사용 가능!)
  • import를 활용하여 외부에 있는 public 함수에 접근
  • 모듈화 시켜야 제대로 작동 된다.

//profile.js 파일
function daynight (x) {
  console.log(x);
}
function day (y) {
  console.log(y);
}
function night (y) {
  console.log(y);
}

export {daynight, day, night} 

//html 파일에서 사용시
<script type="module">
	import {dayNight} from './daynight.js'
</script>

//js 파일에서 사용시
import {dayNight} from './daynight.js';
//혹은
import * as mode from './daynight.js';

2️⃣ export default

• 모듈은 함수가 여러가지 있는 라이브러리 형태 혹은 모듈과 개체 하나만 선언 되어 있는 형태이다.
• export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 의미.
• export default 키워드 사용시 import 할때 대괄호를 생략할 수 있다.
• 각 파일마다 export default는 대개 1개만 존재한다.

//방법1
export default function Profile(name) { 
 console.log(name);
}

//방법2
function Profile(name) {
	console.log(name);
}

export default User;

3️⃣ import시 as 로 별칭 정하기

• import 한 모듈을 as 키워드를 통해 원하는 이름으로 사용할 수 있다.

import {introduce} as intro from './profile.js';

intro('Hello my name is Zeeyoon');

4️⃣ 와일드 카드(*) 로 import 하기

• 와일드 카드로 여러개의 함수를 가지고있는 라이브러리 모듈을 import 해서 사용할 때는
  객체처럼 사용한다.

//profile.js 파일
function name (x) {
  console.log(x);
}
function hello (y) {
  console.log(y);
}

export {name, hello};

import * as bio from './profile.js';

bio.name('Zeeyoon');
bio.hello('안녕하세요');

• import 와 export를 활용해서 컴포넌트화 시킨다 (컴포넌트는 나중에 react에서 자세히..)
• Class와 상속개념에 대해서는 따로 정리한 포스팅을 올려야겠다!