계속 React 공부를 시작한다 해놓고 갑자기 가게를 봐달라, 뭐 해달라 이게 많아서 제대로 시작 못 했는데 드디어 오늘 시작했다.
물론 react로 todolist는 만들어 봤는데 정말 간단하게..(수정 삭제 기능이 없으니 추후에 넣어야 한다.)
그래서 그 전에 필요한 es6문법을 잠깐 공부하는 중이다. 물론 계속해서 공부할 예정이지만 일단 당장 react를 공부하는데 필요한 것들은 미리 해놔야 하니 하는 중이다.
JS를 입력하면서 이게 es6인가 몰랐던 문법들이 있었는데
let, const, arrow function이었다.
나머지는 다 처음 보는 것들이라 아 이런게 es6문법이구나 싶었는데 앞의 변수와 화살표함수는 그냥 JS를 공부할 때도 다 사용하길레 관계가 없는 줄 알았다.
Export와 import
react에선 애플리케이션의 크기가 커질수록 하나의 파일에 코드를 작성하기엔 한계가 존재하는 문제를 모듈(module)이라는 기능을 지원하여 하나의 파일을 여러개로 나눌 수 있게 했다
- export
변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보낸다. - import
export로 내보낸 모듈을 가져오는 기능을 담당
import
import page001 from "./page"import 키워드 다음에 식별자(사용할 변수,함수,클래스)를 작성
form 키워드다음에 불러올 모듈의 경로를 작성
page001.js
const Page001 = () => {
return (
<div>
<h1>Page001 컴포넌트</h1>
</div>
);
};
// export Page001로 작성할 경우 에러가 발생
export { Page001 };app.js
import를 작성한 line에서 중괄호{}를 뺄경우 에러 발생
import { Page001 } from "./Page001";
export default function App() {
return (
<React.Fragment>
<Page001 />
</React.Fragment>
);
}2번째 방법
변수, 함수, 클래스 작성과 함께 export 키워드를 붙인다.(맨 앞에 export키워드를 붙임)
page002.js
export const Page002 = () => {
return (
<div>
<h1>Page002 컴포넌트</h1>
</div>
);
};app.js
import { Page002 } from "./Page002";
export default function App() {
return (
<React.Fragment>
<Page002 />
</React.Fragment>
);
}3번째 방법
as키워드를 사용하여 별칭을 붙여서 내보냄
page404.js
const Page404 = () => {
return (
<div>
<h1>페이지가 존재하지 않습니다.</h1>
</div>
);
};
export { Page404 as ErrorPage };app.js
page404.js의 경로는 변경되지 않았으므로 식별자와 경로의 혼동을 주의하여 작성
import React from "react";
import { ErrorPage } from "./Page404";
export default function App() {
return (
<React.Fragment>
<ErrorPage />
</React.Fragment>
);
}4번째 사용방법
default 키워드를 붙여서 내보내기
Page003.js
일반 함수로 작성할 경우에는 함수 작성과 함께 export default 키워드를 사용 할 수 있습니다.
export default function Page003() {
return (
<div>
<h1>Page003 컴포넌트</h1>
</div>
);
}Page004.js
화살표 함수로 작성할 경우에는 마지막 줄에 export default 키워드를 사용하여 내보냅니다.
const Page004 = () => {
return (
<div>
<h1>Page004 컴포넌트</h1>
</div>
);
};
// default 키워드를 사용하는 경우 중괄호 {} 없이 export 가능합니다.
export default Page004;App.js
default 키워드가 추가된 변수, 함수, 클래스는 중괄호 {} 없이 식별할 수 있습니다.
import React from "react";
import Page003 from "./Page003";
import Page004 from "./Page004";
export default function App() {
return (
<React.Fragment>
<Page003 />
<Page004 />
</React.Fragment>
);
}한 파일에 여러개의 변수, 함수, 클래스를 export 하는경우
주의사항
export default 키워드가 있는 모듈은 중괄호를 사용하여 import할 경우 에러가 발생
한 파일에서 export default 키워드는 오직 한개만 존재해야 한다.function Page005() { return ( <div> <h1>Page005 컴포넌트</h1> </div> ); }
function Page006() {
return (
<div>
<h1>Page006 컴포넌트</h1>
</div> );
}
function Page007() {
return (
<div>
<h1>Page007 컴포넌트</h1>
</div> );
}
export { Page005 as default, Page006, Page007 };
불필요하게 변수, 함수, 클래스 앞에 export를 추가하지 않고 맨 마지막 줄에서 한번에 처리가능
App.js
default 키워드가 붙은 Page005는 중괄호 {} 없이 모듈을 가져옵니다.
default 키워드가 없는 Page006과 Page007은 중괄호 {} 를 사용하여 모듈을 가져옵니다.
```javascript
import React from "react";
import Page005, { Page006, Page007 } from "./MultiPage";
export default function App() {
return (
<React.Fragment>
<Page005 />
<Page006 />
<Page007 />
<ErrorPage />
</React.Fragment>
);
}폴더 내부의 파일을 import하는 방법
폴더 내부에 index.js 파일을생성
index.js파일에서 폴더 내부에 있는 모듈을 관리 할 수 있다.
index.js
index.js 파일은 Page 폴더 내부에 작성된 모듈을 불러와서 내보냅니다.
즉, 폴더 내부에서 export하고자 하는 모듈은 index.js 파일에서 관리가 됩니다.
import DefaultPage from "./DefaultPage";
import { Page001 } from "./Page001";
import Page002 from "./Page002";
import Page003 from "./Page003";
import { ErrorPage } from "./Page404";
export { DefaultPage, Page001, Page002, Page003, ErrorPage };App.js
index.js가 없었다면, 여러번 import 해야 하는 코드가 단 한줄로 처리
import { DefaultPage, Page001, Page002, Page003, ErrorPage } from "./Page";
export default function App() {
return (
<div>
<DefaultPage />
<Page001 />
<Page002 />
<Page003 />
<ErrorPage />
</div>
);
}