React] Import & export

Import

React환경에서 개발하다 보면 여러 개의 모듈을 필요하게 되는데,

외부 라이브러리, 컴포넌트, css 등 다양한 모듈을 사용하기 위해 사용됩니다.

import 식별자(변수, 함수, 클래스) from 경로(ex ”./Page”)

 

import React from "react";
import Page003, { Page001, Page002, ErrorPage } from "./MultiPage";

export default function App() {
  return (
    <>
      <Page003 />
      <Page001 />
      <Page002 />
      <ErrorPage />
    </>
  );
}

 

 

---

 

 

export

개발한 모듈을 다른 모듈을 에서 사용하기 위해서는 해당 모듈에서 export 해야 다른 곳에서 import 할 수 있습니다.

export 하는 방법은 여러 가지 방법이 있으며, 프로젝트 코드컨벤션 진행할 때 맞춰서 작성하면 됩니다.

 

function Page001() {
  return (
    <div>
      <h1>Page001 컴포넌트</h1>
    </div>
  );
};

function Page011() {
  return (
    <div>
      <h1>Page011 컴포넌트</h1>
    </div>
  );
};


export { Page001, Page011 }; // n개의 함수를 export할 수 있음

export function Page002() {
  return (
    <div>
      <h1>Page002 컴포넌트</h1>
    </div>
  );
};

function Page404() => {
  return (
    <div>
      <h1>페이지가 존재하지 않습니다.</h1>
    </div>
  );
};

export { Page404 as ErrorPage }; // as를 통해 export하는 이름을 바꿀 수 있다.

 

 

---

 

 

export default

하나의 모듈에서 하나의 export가 있다는 의미로 보면 된다.

export 뒤에 default만 주면 된다.

 

export default function Page003() {
  return (
    <div>
      <h1>Page003 컴포넌트</h1>
    </div>
  );
}

function Page003() {
  return (
    <div>
      <h1>Page003 컴포넌트</h1>
    </div>
  );
}

export default Page003;

 

 

---

 

 

사실 IDE에서 자동으로 import 해주기 때문에 굳이 직접 타이핑할 일은 거의 없다고 보면 됩니다. 알고만 있을 정도?
export 방법이 다양하게 있지만 굳이 다 알 필요는 없는 거 같고,
저는 주로 마지막줄에 export를 추가하는 것이 가독성이 좋아 보여 주로 사용합니다.