named export / default export

trina lee·2023년 5월 19일

1. named export

복수의 함수가 있는 라이브러리 형태의 모듈

export { dummyTweets }; 
=> 
import { dummyTweets } from "../static/dummyData";

똑같은 이름으로 import 해야 한다.

2. default export

개체 하나만 선언되어있는 모듈

export default Sidebar; 
=> 
import Sidebar from "./Sidebar";

리액트로 개발할 때 하나의 파일에 하나의 컴포넌트만 있다면 보통 해당 컴포넌트 이름으로 export한다.
모듈은 export default라는 특별한 문법을 지원한다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있다.(여기서 모듈이란 하나의 파일을 말한다.)
아래 처럼 Test를 내보냈지만 원하는 이름(여기서는 Testing)으로 import 할 수 있다.

// Test.js - Test로 내보낸다.

export default function Test() {
  console.log("hi");
}
// App.js

import Testing from "./Test.js";	
// Test로 내보냈지만 내가 원하는 이름(Testing)으로 가져올 수 있다.
profile
지금은 개발 모드

0개의 댓글