Import & Export

홍성표·2022년 5월 10일
0

Export

  • 변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보낸다.

Import

  • export 로 내보낸 모듈을 가져온다.

why?

  • 애플리케이션의 크기가 커질수록 파일 하나로 코드를 작성하기 힘들기 때문에 모듈이라는 기능을 사용하여 하나의 파일을 여러개의 파일로 나눌 수 있다.

emotion.js 에서의 사용

  • ex) emotion.js
//다운받은 emotion 가져오기
import styled from "@emotion/styled"

//내가 원하는 태그 생성 & 외부로 내보내기
export const Wrapper = styled.div `
	width: 300px;
	height: 300px;
	background-color: #000;
`
  • ex) index.js
//emotion.js 파일에서 export 한 태그 가져오기
import { Wrapper } from " ../styles/emotion.js"

//브라우저로 내보내기
export default function MyPage () {
  
  //자바스크립트 작성
  
  return (
    
    //html 작성
    <Wrapper>안녕하세요</Wrapper>
    )
}
profile
안녕하세요. 홍성표입니다.

0개의 댓글