[React.js] index.js로 컴포넌트(Component), 페이지(Page) 관리하기

index.js로 컴포넌트(Component), 페이지(Page) 관리하기

들어가며

• 다음과 같이 src 폴더 내부에 있는 components, pages 폴더 안에 index.js 파일을 생성하여 여러 컴포넌트와 페이지들을 하나의 파일에서 관리할 수 있다.
• 이와 관련된 내용을 정리해본다.

각 폴더에 있는 index.js 파일들의 모습

 

index.js

개념

• 리액트(React.js) 프로젝트에서 pages나 components 폴더 안에 위치한 index.js 파일은 해당 폴더 내의 여러 컴포넌트들을 한 곳에서 쉽게 불러올 수 있도록 다시 export 해주는 역할을 한다.
• index.js 파일 안의 내용은 다음과 같이 구성할 수 있다.

 

사용 방법

• pages 또는 components 폴더에 index.js 파일을 생성한 후, 다음과 같이 해당 폴더 안에 들어 있는 컴포넌트 파일들을 import 해준다.

./src/components/index.js

• 아래의 코드는 2개의 컴포넌트를 현재 폴더(components)의 index.js 파일을 통해 다시 export 하고 있다.

			
			
			
		
export { default as FormInput } from './FormInput';
export { default as SubmitBtn } from './SubmitBtn';

 

⇒ 기본(default)으로 내보내진 컴포넌트를 가져와서 FormInput/SubmitBtn이라는 이름으로 다시 export 한다.

 

장점

• 여러 컴포넌트를 따로따로 import 하는 대신, index.js 파일을 통해 한 번에 import 할 수 있다.

 

./src/App.jsx

•  index.js 파일을 사용하지 않을 경우

			
			
			
		
import FormInput from './components/FormInput';
import SubmitBtn from './components/SubmitBtn';

 

• index.js 파일을 사용할 경우

			
			
			
		
import { FormInput, SubmitBtn } from './components';

 

• import 경로가 간단해져 코드 가독성이 향상된다.
• 프로젝트 구조가 변경되더라도 index.js 파일만 수정하면 되므로 유지 보수가 편리해진다.
• 폴더 내의 모든 컴포넌트를 한 곳에서 관리할 수 있어, 새로운 컴포넌트를 추가하거나 기존 컴포넌트를 제거할 때 편리하다.

 

참고 사이트

How do index.js files work in React component directories?