React의 내보내기 기능

때로는 필요한 변수와 함수를 포함하는 라이브러리를 만들어야 합니다. 문제는 라이브러리 내에서 변수와 함수를 가져와 다른 스크립트에서 사용하는 방법입니다.

답은 export 키워드를 사용하는 것입니다. 이제 여기서 내보내기 키워드는 라이브러리의 공유 가능한 요소를 지정합니다.

이 간단한 기사에서는 React JS에서 함수를 내보내는 방법을 보여줍니다. 또한 주제를 더 쉽게 만들기 위해 필요한 예와 설명을 볼 것입니다.

React에서 내보내기 기능 사용

아래 예제에서는 별도의 JS 파일을 생성했으며 파일 내부에는 showmessage()라는 함수가 있습니다. 우리는 showmessage() 함수를 기본 내보내기로 선언했습니다.

코드 - Export.js:

function showmessage() {
  console.log('This is an exported function !!!');
}
export default showmessage;  // Exporting the function

외부 JS 파일에 대해 showmessage() 함수를 내보낸 기본 JS 파일을 살펴보십시오. 기본 JS 파일에 대한 이 코드는 아래와 같습니다.

코드 - App.js:

import './App.css';

import showmessage from './Export';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    showmessage();
  }

  return (
    <a href='#' onClick={handleClick}>
      Click me
    </a>
  );
}
export default App;

위의 코드에서 먼저 필요한 파일을 가져오고 메인 함수 내에서 handleClick을 생성했습니다. handleClick 내부에서 방금 외부 JS 파일에서 가져온 showmessage() 함수를 전달했습니다.

위의 코드를 실행하면 웹 콘솔에 아래와 같은 출력이 표시됩니다.

This is an exported function !!!

이 글에서 공유하는 예제 코드는 React JS 프로젝트로 작성되었습니다. React 프로젝트를 실행하려면 시스템에 최신 Node JS 버전이 있어야 합니다.