export와 import
React 모듈의 기본 구조
앞선 예제에서 사용한 App.js 파일의 코드를 다시 한 번 살펴봅시다.
App.js
import Greeting from "./Greeting";
function App() {
return <Greeting />;
}
export default App;
코드 상단에 위치한 import 문은 다른 곳에 정의된 코드를 App.js 파일 내에서 사용할 수 있도록 불러오는 구문입니다.
즉, 아래 코드는 현재 파일과 같은 폴더에 위치한 Greeting.js라는 파일을 찾아 그 안에 작성된 코드를 App.js 파일 내에서 사용할 수 있도록 Greeting이라는 이름으로 불러오라는 의미입니다.
import 문
import Greeting from "./Greeting";
그 다음으로 function 키워드를 사용하여 함수 기반의 App 컴포넌트를 선언하고 있습니다. 이때 앞서 import한 Greeting 컴포넌트를 사용자 정의 컴포넌트로 사용하고 있습니다.
컴포넌트 코드
function App() { return <Greeting />; }
마지막으로 코드 하단에 위치한 export 문은 위에서 선언한 App 컴포넌트를 다른 모듈에서 불러와 사용할 수 있도록 내보낸다는 의미입니다.
export 문
export default App;
React에서 모듈의 코드는 일반적으로 import문-컴포넌트 코드-export문의 구조를 따라 작성됩니다.
모듈 내보내기
React에서 모듈을 내보내는 방법은 간단합니다. 내보내길 원하는 변수나 함수, 클래스 앞에 export 키워드를 붙여주기만 하면 되며, 이를 named export라고 부릅니다.
앞서 살펴 본 코드처럼 함수를 먼저 선언하고 나중에 따로 내보낼 수도 있지만, 내보내길 원하는 변수나 함수, 클래스를 선언과 동시에 바로 내보낼 수도 있습니다.
선언과 동시에 내보내기
export default function App() {
return <Greeting />;
}
선언과 별도로 내보내기
function App() {
return <Greeting />;
}
export default App;
이 두 유형의 코드는 완전히 동일하게 동작하며, export문을 함수의 선언부보다 먼저 작성해도 올바르게 동작합니다.
React에서 모듈은 크게 두 가지 유형으로 구분할 수 있습니다.
1. 하나의 컴포넌트만 선언되어 있는 모듈
2. 복수의 컴포넌트가 선언되어 있는 라이브러리 형태의 모듈
우리가 지금까지 살펴본 App.js 파일은 하나의 파일에 하나의 함수만이 선언되어 있는 1번 유형이며, 대부분 이와 같이 하나의 파일에 하나의 컴포넌트 만을 선언하여 사용하는 경우가 일반적입니다.
만약 2번 유형처럼 하나의 파일에 복수의 컴포넌트를 선언하고, 여러 컴포넌트를 내보내고 싶다면 각각의 컴포넌트 선언부에 export 키워드를 붙여주면 됩니다.
예제(Laptop.js)
export function GetBrand() {
return <h1>내 노트북은 Samsung 노트북입니다.</h1>;
}
export function GetOS() {
return <h2>내 노트북의 OS는 Windows입니다.</h2>;
}
만약 선언부에 각각 export 키워드를 붙여주는 것이 귀찮다면 아래 코드처럼 중괄호({})를 사용하여 한 번에 내보낼 수도 있습니다.
예제(Laptop.js)
function GetBrand() {
return <h1>내 노트북은 Samsung 노트북입니다.</h1>;
}
function GetOS() {
return <h2>내 노트북의 OS는 Windows입니다.</h2>;
}
export { GetBrand, GetOS };
모듈 불러오기
React에서는 import 키워드와 중괄호({})를 사용하여 다른 파일에서 특정 컴포넌트를 불러올 수 있습니다. import될 때 사용되는 이름은 원래 파일에서 선언된 이름을 그대로 사용해야 합니다.
App.js
import { GetBrand, GetOS } from "./Laptop";
export default function App() {
return (
<>
<GetBrand />
<GetOS />
</>
);
}
만약 불러올 컴포넌트의 개수가 많다면 ‘import * as <object>’구문을 사용하여 객체 형태로 원하는 컴포넌트들을 한 번에 불러올 수도 있습니다. 하지만 이 경우에는 사용할 때 ‘laptop.’이라는 코드가 추가되어야 하므로, 코드가 좀 더 복잡해집니다.
예제(App.js)
import * as laptop from "./Laptop";
export default function App() {
return (
<>
<laptop.GetBrand />
<laptop.GetOS />
</>
);
}
React에서는 가급적 첫 번째 예제처럼 다른 파일에서 가져오는 컴포넌트의 이름을 구체적으로 명시하는 것이 좋습니다. 이는 우리가 앞서 공부한 Webpack과도 관계가 있는데, 번들러는 로딩 속도를 높이기 위해 번들링과 최적화 작업을 수행하면서 사용하지 않는 리소스를 삭제하기도 합니다.
이때 import문을 확인하여 실제 사용되는 함수를 빠르게 파악하고, 사용되지 않는 함수는 번들링 결과물에서 제외시킴으로써 최종 결과물의 크기를 줄이게 됩니다. 또한, 사용되는 컴포넌트의 이름과 용도가 명확해지기 때문에 전체적인 코드의 구조를 파악하기가 쉬워지며, 이를 통해 코드의 리팩터링이나 유지보수가 쉬워집니다.
다른 이름으로 불러오기
as 키워드를 사용하면 원래 파일에서 선언한 이름과는 다른 이름으로 컴포넌트를 불러올 수 있습니다.
예제(App.js)
import { GetBrand as Brand, GetOS as OS } from "./Laptop";
export default function App() {
return (
<>
<Brand />
<OS />
</>
);
}
