React Router의 인덱스 라우트

이번 수업에서는 인덱스 라우트가 무엇인지 알아보겠습니다.

먼저 한 가지에 주목해 봅시다. 메인 페이지에 있을 때 오른쪽에는 그냥 빈 화면만 보입니다. 그 이유는 어떤 자식 라우트도 주소 /에 해당하지 않기 때문이며, 이 경우 무엇을 표시할지 지정하지 않았기 때문입니다. 이런 경우 빈 페이지를 표시하지 않기 위해 인덱스 라우트를 사용할 수 있습니다. 이것은 경로를 갖지 않는 자식 라우트로, 자식 라우트 중 어느 것도 일치하지 않을 때 부모의 Outlet에 해당 요소가 표시됩니다. 이러한 라우트를 사용하여 정보, 통계 또는 기타 유사한 내용을 배치할 수 있습니다. 일반 라우트와 마찬가지로 데이터 로드에 사용할 수도 있습니다.

이제 routes 폴더에 index.jsx 파일을 생성하고, 그 안에 Index 컴포넌트를 만들어 봅시다:

export default function Index() {
	return (
		<div>
			<p>Hi, React Router!</p>
			<p>This is an application for my products :)</p>
		</div>
	);
}

이제 main.jsx로 이동하여 Index 컴포넌트를 가져옵니다:

import Index from './routes/index';

그리고 children 배열의 첫 번째 요소로 index 속성이 true로 설정되고, 표시할 요소로 우리의 Index 컴포넌트를 사용하는 객체를 추가합니다:

{ index: true, element: <Index /> },

지난 수업의 과제에서 만든 애플리케이션을 가져오세요. 수업 내용을 활용하여 메인 페이지 주소에 몇 가지 텍스트가 있는 인덱스 라우트를 추가하세요.