React Export & Import

devyunie·2024년 8월 22일

React

목록 보기
6/20
post-thumbnail

export

  • export : 변수 , 함수 , 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보냄
export function 함수명() {}

import

  • import: export로 내보낸 모듈을 가져오는 기능을 담당함
  • { } 내부에는 동일한 export한 함수 또는 클래스명이 입력 되어야한다.
  • { } 내부에서 입력한 함수에 as 를 통해 별칭 지정가능
import {클래스, 함수명} from "경로"; 
import {클래스, 함수명 as 별칭} from "경로"; 

default

  • 일반 클래스, 함수에 export default 키워드를 사용하여 생성
  • 화살표 함수로 작성한 경우 마지막 줄에 "export default 이름" 으로 사용하여 내보냄
  • default 키워드가 추가된 변수, 함수 ,클래스는 중괄호{}없이 식별 가능
import Component, { ClassComponent, FunctionComponent } from './component/Component'

⚠️ 주의

  • export default 키워드가 있는 모듈은 중괄호를 사용하여 import할 경우 에러가 발생
  • 한 파일에서 export default 키워드는 오직 한 개만 존재 가능

0개의 댓글