JavaScript 파일을 ReactJS로 가져오기

이 튜토리얼은 가져오기/내보내기(ES6 모듈) 및 기본 내보내기를 사용하여 JavaScript 파일을 ReactJS로 가져오는 방법을 보여줍니다.

JavaScript 파일을 ReactJS로 가져오기

기본 ES6 모듈 시스템을 사용하여 다른 JavaScript 파일에 JavaScript 파일을 포함할 수 있습니다. 이를 통해 다양한 JavaScript 파일 간에 코드 모듈성 및 코드 공유를 생성할 수 있습니다.

JavaScript include 및 Node JS require와 같은 여러 기술에는 JS 파일이 포함됩니다.

기본 ES6 모듈 시스템은 모든 개별 코드 조각이 통신할 수 있도록 보장하면서 코드를 여러 파일과 디렉토리로 분할하는 메커니즘을 제공합니다.

React에서 다음 두 가지 방법 중 하나로 JS 파일을 가져올 수 있습니다.

1. 가져오기/내보내기 사용 | ES6 모듈
2. 기본 내보내기 사용

가져오기/내보내기(ES6 모듈)를 사용하여 JS 파일을 ReactJS로 가져오기

ES6 방법을 사용하여 가져오기 및 내보내기부터 시작하겠습니다. 그러나 먼저 helper.js라는 파일에 아래 나열된 메서드와 상수를 만듭니다.

export function greetFunction(name) {
  return `Hello, ${name}`;
}
export const appMessage = 'Hello World! Welcome to DefltStack!';

이전에 export 키워드를 사용하여 다른 파일에서 함수와 변수를 사용할 수 있음을 선언한 것을 볼 수 있습니다.

통사론:

import {object1, object2, ...} from 'filename.js'

다른 파일을 만들고 이름을 main.js로 지정한 다음 그 안에 다음 코드를 붙여넣습니다.

import {appMessage, greetFunction} from './helper.js';

export default function App() {
  const greetDelftStack = greetFunction('DelftStack');
  return (
    <Fragment>
      {appMessage}
      <br>
      {greetDelftStack}
    </Fragment>
  )
}

출력:

Hello World! Welcome to DefltStack!
Hello, DelftStack

첫 줄의 중괄호 안에 greetFunction 및 appMessage를 정의하여 helper.js에서 가져옵니다. 이제 가져온 개체가 이 줄 다음에 같은 파일에 정의되어 있으므로 사용할 수 있습니다.

그런 다음 두 개체의 출력이 콘솔에 기록되었습니다.

Default 내보내기를 사용하여 JS 파일을 ReactJS로 가져오기

default 키워드를 사용하면 자동으로 파일에서 하나의 개체를 내보낼 수 있습니다. 이것이 왜 중요한가요? 삽화를 봅시다. helper.js의 function greetFunction(name) 앞에 default를 추가하여 기본 내보내기로 만듭니다.

export default function greetFunction(name) {
  return `Hello, ${name}`;
}

이제 다음과 같이 main.js로 가져올 수 있습니다.

import anyFnName from './helper.js';
export default function App() {
  const greetDelftStack = anyFnName('DelftStack');
  return (
    <main>
      {greetDelftStack}
    </main>
  )
}

출력:

Hello, DelftStack

정확한 프로세스는 이전과 동일하게 작동합니다. 기본 내보내기 중에 helper.js에서 AnyFnName을 가져옵니다. helper.js에 anyFnName이 없기 때문에 기본 내보내기는 greetFunction()이며 이 경우 임의의 이름으로 내보내집니다.

이러한 예제 코드에 대한 데모는 여기에서 찾아 연습할 수 있습니다. 그러나 먼저 사용자가 ES6 모듈을 사용할 때 염두에 두어야 할 몇 가지 중요한 ES6 모듈 관련 측면에 대해 이야기해 보겠습니다.

• 기본 내보내기를 가져올 때 중괄호를 제거해야 합니다. 그러한 내보내기가 존재하지 않는다는 오류가 생성되었을 것입니다.
• 하나의 파일에 여러 내보내기가 있을 수 있습니다. 그러나 파일에는 하나의 기본 내보내기만 있을 수 있습니다.
• 별칭 이름을 사용하여 표준 내보내기를 가져올 수 없습니다. 따라서 일반 내보내기를 가져올 때 동일한 이름을 사용해야 합니다.
• 기본 및 일반 내보내기를 혼합할 수 있습니다. 예를 들어 명명된 내보내기 또는 표준 내보내기의 경우 {}를 사용하고 기본 내보내기의 경우 {}를 유지합니다.
• *를 사용하여 모듈의 내용을 가져올 수 있습니다. 그런 다음 모듈은 모든 내보내기에 액세스하기 위한 네임스페이스로 사용됩니다.
• 파일 끝에 모든 개체를 동시에 내보낼 수 있습니다.

따라서 위의 방법 중 하나를 선택하여 JavaScript 파일을 ReactJS로 가져올 수 있습니다.