코드(컴포넌트) 관리, 분리(export, import)

코드 유지보수를 용이하기 위해 코드를 분리해서 관리한다.

 

export 

named export

분리된 코드를 다른 곳에 사용하고 싶다면 export를 컴포넌트 앞에 작성하면 된다.

 

작성할때 export를 따로 빼서 작성해도 된다.

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

function MyNavBar() {
  return (
    <di>
      <h1>MyNavBar 컴포넌트 호출</h1>
    </di>
  );
}

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

const country = "대한민국";
const text = "곧 점심시간이당";
const value = { v1: "객체타입", v2: 100 };

export { MyElem, MyNavBar, MyContent, text, country, value };

따로 export 선언

이렇게 이름(변수명, 컴포넌트명)으로 export하는걸 named export라고 한다.

 

export default 

이름은 정해져 있지 않고 한 파일에 하나만 가능하다.

이름이 정해져 있지 않다는게 무슨말이냐?

이렇게 age 변수가 export default 되어 있다고 보면import 할 때

age의 이름이 아닌 아무이름이나 해도 경로만 맞으면 사용할 수 있다.

---

import

export한 코드를 사용하고 싶을때 import {컴포넌트명} from "경로";

 

분리된 컴포넌트에 여러 컴포넌트가 있으면 , 로 여러개 사용이 가능하다

한 파일 안에 여러개의 export 된 컴포넌트

import 할 때 한 파일안에 여러 컴포넌트 가져오기

 

변수들도 export import 가능하다.

분리된 컴포넌트 파일안에 변수들 export

변수명으로 import 해서 사용 가능

 

import 할 때 export 명이 겹치는 경우 as로 별칭을 부여할 수 있음

---