import

다른파일에있는 변수나 함수 등을 현재 js파일(형식은 딱히 상관 없는 듯하다?) 에 끌고와서 사용하는 법이다. 다만 끌고오는 파일의 변수, 함수가 반드시 export 되어야한다

useState, useMutation 등..(이런 함수들도 여기에 포함되는진 정확하게 모르겠지만 어쨌든 import해오는 것들이긴하다.)

import를 하지않으면 사용할 수 없는 기능들도 더러 존재하는 것 같다.

가끔 import할 변수들이 너무 많아 코드가 길어질 떄가 있는데

(현재로선 style관련 태그들)

다행스럽게도 아래와 같이 한번에 모두 끌어오는 기능도 있다.

import * as (임의설정변수) from '주소'

ex)

import * as S from './style.container'

*(전체) 를 변수 S 로서 현재 페이지에서 사용하겠다는 얘기이다.

물론 익스텐션으로 자동으로 변수들이 업데이트 되기도 하지만 * 이라는 하나의 표현으로 축약이 가능하다.

export

import를 하기위해 필요한 녀석이다. 말그대로 현재 파일 밖으로 내보내 다른파일에서도 쓸 수 있게하는 역할을 담당하고있다.

아래의 코드들은 모두 유효한 표현이다

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

export const MODULES_BECAME_STANDARD_YEAR = 2015;

export class User {
  constructor(name) {
    this.name = name;
  }
}

또한 선 선언후 export도 가능하다

function Hello() {
}
function Hi() {
}
export (Hello, Hi)