React, Import와 Export

javascript에는 Import와 export라는 개념이 있다.

덕분에 컴포넌트를 활용하기가 참 편리하다. Import와 Export로 모듈을 쉽게 내보내고 사용할 수 있기 때문이다.

 

❗️모듈(Module)이란?
하나의 Javascript 파일에 많은 내용이 담기면 파일이 커지고 관리하기가 어려워진다. 그래서 여러 파일로 생성해서 관리하는데 이런 각각의 파일을 모듈이라고 부른다. 

 

파일 Import, Export

다른 파일을 가져오고 싶을 때 아래와 같이 import를 사용하면된다. 보통 코드 상단에 import 코드를 작성한다.

import app from './app.js'; // 변수명은 자유롭게 바꿀 수 있다.

 

변수, 함수 Import, Export

원하는 변수나 함수를 가져올 때도 비슷하다. 변수 앞에 export를 붙이면 된다.

export const number = [1, 2, 3];
export const onClickEvent = () => {console.log("wow")};

한번에 export 할 수도 있다.

const number = [1, 2, 3];
const onClickEvent = () => {console.log("wow")};

export{number, conClickEvent}

 

defalut를 붙여주면 해당 함수를 기본으로 내보내게 된다.

export default function App() {
  const a = 1;
  };

 

export한 변수나 함수를 사용할 때는 아래와 같다.

import { number, onClickEevent } from "./app";

console.log(number) // 1,2,3

 

라이브러리 Import

라이브러리를 사용할 때도 Import를 사용한다.

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { useRouter } from "next/router";