다른 디렉토리에서 파일을 가져오는 방법 ReactJS

파일 가져오기란 파일을 외부 소스에서 프로그램이나 애플리케이션으로 가져와서 해당 환경 내에서 해당 콘텐츠로 작업할 수 있다는 것을 의미합니다. 이는 다양한 분야에서 기본적인 프로세스입니다. 다양한 파일 형식, 애플리케이션 및 목적과 관련된 디지털 작업

ReactJS에서 파일을 가져오는 것은 애플리케이션 개발의 중요한 측면입니다. 이를 통해 애플리케이션을 구성 요소라고 하는 관리 가능한 코드 덩어리로 나눌 수 있습니다.

이 튜토리얼에서는 ReactJS가 아닌 다른 폴더에 있는 파일을 가져오는 방법을 알아봅니다. 

ReactJS에서 파일을 가져오는 방법

예를 들어 보겠습니다. 'Header'라는 React 구성요소가 있다고 가정해 보겠습니다. 'Header.js'라는 파일에 있습니다. 이제 이 '헤더'를 사용하고 싶습니다. 'App.js' 파일. 그렇게 하려면 '헤더' 'Header.js'의 구성요소; 'App.js'로.

ReactJS에서 파일을 가져오는 구문은 다음과 같습니다.

import { ComponentName } from './ComponentFile';

이 예에서는 'Header' 'Header.js'의 구성요소; 'App.js'에 다음과 같이 작성합니다.

import { Header } from './Header';

다른 디렉토리에서 파일 가져오기

위의 예에서는 'Header.js' 및 'App.js' 같은 디렉토리에 있습니다. 하지만 그렇지 않다면 어떨까요? 만약 'Header.js' 다른 디렉토리에 있습니까?

그렇다면, 'Header.js'의 상대 경로를 지정해야 합니다. 'App.js'에서 수입 명세서에서. 'Header.js'를 가정해 보겠습니다. 는 'comComponents'라는 디렉토리 안에 있습니다. 이는 'App.js'와 같은 디렉토리에 있습니다. 그런 다음 '헤더'를 가져옵니다. 이와 같이:

import { Header } from './components/Header';

기본 내보내기 및 가져오기

기본 내보내기 및 가져오기라고 알려진 ReactJS에서 모듈을 내보내고 가져오는 또 다른 방법이 있습니다. 기본 내보내기는 파일을 가져올 때 기본적으로 내보내지는 파일의 일부입니다.

'Header.js'를 가정해 보겠습니다. 기본 내보내기가 있습니다 - '헤더' 요소. 작성 방법은 다음과 같습니다.

export default Header;

이를 'App.js'로 가져오는 방법은 다음과 같습니다.

import Header from './components/Header';

차이점이 보이시나요? 기본 내보내기를 사용하면 가져오는 동안 구성 요소 이름 주위에 중괄호가 필요하지 않습니다.

이제 'Header.js' '구성요소'에 없습니다. 디렉토리이지만 'layout' '컴포넌트' 내부. 그런 다음 'App.js' 다음과 같이 보일 것입니다 :

import Header from './components/layout/Header';

이 튜토리얼에서는 ReactJS가 아닌 다른 폴더에 파일을 가져오는 방법을 배웠습니다.