[코드캠프]FE 6기 1주차(Import&Export)

바닐라 자바스크립트 에서 React.js 와 Next.js 를 공부하면서 Node.js를 설치했다
Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다.
Node.js 를 설치 함 으로써 import 와 export를 사용 할 수 있게 되며, 좀더 유동성 있게 파일이나 정보를 가지고 올수 있다. 자바스크립트도 모듈이긴 하지만 React 나 Next 에서 JS 파일 하나하나가 모듈 형식이기 때문에 보다 편하게 작업 하기 위해서 필요하다고 할 수 있다.

[Export 하기]
모듈 하나를 다른 모듈에서 접근 하게 하기 위해서는 Export를 해야한다.

const person = () => {
    return (
        <div>
        </div>
    )
}

export default person;	//이 파일에는 person이라는 이름의 유일한 모듈 하나만 export 할 수 있다.

[여러 함수를 Export 하기]
여러 함수를 Export 하기 위해서는 함수 앞에다가 export를 붙여준다.
Export를 지정한 함수에 접근을 하기 위해서는 export를 지정한 JS 파일 위치를 Import 해주고 대괄호로 감싸면 된다.

export function person() {
  console.log(`Hello`);
}

export function name() {
  console.log(`I'm Min!`);
}

[여러 함수를 Export 해주기 싫다면?]

 function person() {
  console.log(`Hello`);
}

 function name() {
  console.log(`I'm Min!`);
}

export{person,name}

[export 한 함수를 가져오고 싶을때]

import person from "../person" //기본적으로 export Default 상태인 모듈을 가져올때 
import {person,name} from "../person" //각각의 개별의 export 된 함수를 가져올때

[export 한 함수의 이름을 변경해서 사용하고 싶을때]

import {person as me, name as family} from '../person'