import와 Export

jsx를 학습하면서 자연스럽게 import와 export를 사용하였는데 이 두가지의 차이점은 무엇일까?

 

export : 내보내기

import : 가져오기

 

export를 사용하면 상수나 함수를 내보낼 준비가 완료된 것 입니다.

export default function PortFolioMoved() {
  return (
    <div>
      <PortFolioQueryContainer />
      <PortFolioMovedComments />
    </div>
  );
  
  //PortFolioMoved 함수를 내보낼 수 있습니다.

 

만약 export 뒤에 default가 있다면 해당페이지에서 유일하게 내보낼 수 있는 함수가 됩니다.

따라서 import할때 { } 를 사용하지 않고 받아야 합니다.

 

import PortFolioMoved from "./BoardsWrite.presenter";

//"" 안에 PortFolioMoved가 있는 경로를 입력합니다.
// 경로안에 PortFolioMoved가 export default로 작성됨

import {
  CREATE_BOARD_COMMENT,
  FETCH_BOARD_COMMENTS,
  DELETE_BOARD_COMMENT,
} from "./BoardsWrite.queries";

//여러가지 변수를 가져올 수 있다면 { } 안에 ,를 사용하여 가져올 수 있습니다.

 

 

함수 뿐아니라 스타일 태그 또한 같은 방법으로 불러올 수 있습니다.

여기서 * as S from 을 사용하였습니다.

위처럼 가져올 것이 많으면 import * as <obj> 처럼 객체 형태로 원하는 것들을 가지고 올 수 있습니다.