인프런 커뮤니티 질문&답변

문제 발생 섹션: 4-1. Footer 제작

문제 내용:

강의 자료에서 제공된 App.jsx 코드에 구조적 오류가 있습니다.

문제점:
1. RootLayout 컴포넌트 내부에서 <Outlet /> 컴포넌트를 사용하고 있으나, 라우터 설정에 자식 라우트(children routes)가 정의되어 있지 않습니다.

2.현재 라우터 구조:
```
const router = createBrowserRouter([

{

path: "/",

element: <LootLayout />,

// children이 없음 - Outlet이 렌더링할 내용이 없음

},

]);
```
발생한 에러:

• Outlet 컴포넌트 관련 에러 발생

• 해당 코드 제거 시 정상 동작

제안 사항:

아래 두 가지 중 하나로 수정이 필요합니다:

방법 1)
자식 라우트가 없다면 Outlet 제거
```
<main className="flex-grow container mx-auto px-4 py-8">

{/* <Outlet /> 제거 */}

</main>

추가 의견:

해당 강의를 수강하면서 이번 건 외에도 여러 오류를 발견했습니다. 학습에 상당한 지장이 있는 상황이므로, 강의 전체에 대한 코드 검수 및 업데이트를 요청드립니다.

특히 React Router v6의 최신 문법과 개념(Outlet, createBrowserRouter 등)이 정확히 반영되었는지 재확인이 필요해 보입니다.

수강생들이 불필요한 디버깅 시간을 소비하지 않도록 조속한 개선 부탁드립니다.