[React] 중첩된 라우트 , Outlet

다음은 책 리액트를 다루는 기술을 읽고 공부한 내용을 바탕으로 작성된 글입니다.

---

 

function App() {
	return (
		... 
      <Route path="/articles" element={<Articles />}>
        <Route path=":id" element={<Article />} />
      </Route>
      );
}

 

컴포넌트 <Articles /> 를 element로 가지는 Route에 <Article />을 element로 가지는 컴포넌트가 Children으로 들어가 있다. 다음을 코드를 이어서 보자.

 

 

const Articles = () => {
return (
	<div>
    	<Outlet />
        <ul>
        ...
        ...
        </ul>
    </div>
	);
};

 

<Outlet />이라는 컴포넌트를 사용했다. 이는 'react-router-dom'에서 제공하는 컴포넌트로,

Route의 children 으로 들어가는 JSX 엘리먼트를 보여주는 역할을 한다.

 

즉, 이 코드의 경우 

 

<Route path=":id" element={<Article />} />

의 내용이 Outlet 컴포넌트가 사용된 자리에 중첩되어 보여진다. 즉, Articles 컴포넌트의 맨 윗 부분에 Article 컴포넌트의 내용이 채워지게 된다.

 

 

공통 레이아웃 컴포넌트

중첩된 라우트와 Outlet은 페이지끼리 공통적으로 보여줘야 하는 레이아웃이 있을 때에도 유용하게 사용할 수 있다.

예를 들어 홈페이지에서 페이지 상단에 헤더를 보여줘야 하는 상황에서, <Layout /> 컴포넌트를 만들어 컴포넌트 안에 header를 넣어놓고, Layout의 children으로 나머지 필요한 컴포넌트를 배치한다면, header는 모든 컴포넌트들에서 중첩적으로 보여질 것이다.