[React] export와 import

복습

https://shins99.tistory.com/66

[React] 컴포넌트(component)

---

React 모듈의 기본 구조

- 코드 상단에 위치한 import 문은 다른 곳에 정의된 코드를 App.js 파일 내에서 사용할 수 있도록 불러오는 구문

import Greeting from "./Greeting";
 
function App() {
  return <Greeting />;
}
 
export default App;

 

- 현재 파일과 같은 폴더에 위치한 Greeting.js라는 파일을 찾음

- 그 안에 작성된 코드를 App.js 파일 내에서 사용할 수 있도록 Greeting이라는 이름으로 불러오라는 의미

 

import 문

import Greeting from "./Greeting";

 

- function 키워드를 사용하여 함수 기반의 App 컴포넌트를 선언

- 앞에서 import한 Greeting 컴포넌트를 사용자 정의 컴포넌트로 사용

 

컴포넌트 코드

function App() {   return <Greeting />; }

 

export 문은 위에서 선언한 App 컴포넌트를 다른 모듈에서 불러와 사용할 수 있도록 내보낸다는 의미

 

export 문

function App() {   return <Greeting />; }

 

React에서 모듈의 코드는 일반적으로 import문-컴포넌트 코드-export문의 구조를 따라 작성

---

모듈 내보내기

React에서 모듈을 내보내는 방법

 

1. 내보내길 원하는 변수나 함수, 클래스 앞에 export 키워드를 붙여주면 끝

 (이를 named export라고 부름)

 

선언과 동시에 내보내기

export default function App() {
  return <Greeting />;
}

 

선언과 별도로 내보내기

function App() {
  return <Greeting />;
}
 
export default App;

 

두 유형의 코드는 완전히 동일하게 동작, export문을 함수의 선언부보다 먼저 작성해도 올바르게 동작

 

React에서 모듈은 크게 두 가지 유형으로 구분
1. 하나의 컴포넌트만 선언되어 있는 모듈
2. 복수의 컴포넌트가 선언되어 있는 라이브러리 형태의 모듈

 

1번 유형 : 하나의 파일에 하나의 함수만이 선언

2번 유형 :  하나의 파일에 복수의 컴포넌트를 선언

 

(Laptop.js)

1 2 3 4 5 6 7

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 };

 

---

모듈 불러오기

import 키워드와 중괄호({})를 사용하여 다른 파일에서 특정 컴포넌트를 불러올 수 있음

import될 때 사용되는 이름은 원래 파일에서 선언된 이름을 그대로 사용

 

모듈 불러오기

import { GetBrand, GetOS } from "./Laptop";
 
export default function App() {
  return (
    <>
      <GetBrand />
      <GetOS />
    </>
  );
}

 

 

 

불러올 컴포넌트의 개수 많을 시 ‘import * as <object>’구문 사용해 객체 형태로 원하는 컴포넌트 한 번에 불러올 수 있음

(이 경우  ‘laptop.’ 코드 추가 필요, 코드가 복잡성 증가)

 

import * as laptop from "./Laptop";
 
export default function App() {
  return (
    <>
      <laptop.GetBrand />
      <laptop.GetOS />
    </>
  );
}

 

 

- 다른 파일에서 가져오는 컴포넌트의 이름을 구체적으로 명시하는 것이 좋음

---

다른 이름으로 불러오기

as 키워드 사용하면 원래 파일에서 선언한 이름과는 다른 이름으로 컴포넌트를 불러올 수 있음

import { GetBrand as Brand, GetOS as OS } from "./Laptop";
 
export default function App() {
  return (
    <>
      <Brand />
      <OS />
    </>
  );
}