React Router v6의 Outlet 기능

저번에 한번 Outlet에 대해 정리한 적이 있었는데,
왜 사용하는지 어디가 좋은지에 대한 것은 알아보지 않았었다.

Outlet 컴포넌트는 다중페이지 어플리케이션에서 사용되며, 여러 페이지 컴포넌트를 효과적으로 렌더링하기 위한 것.
Outlet 컴포넌트는 React Router에서 다중 라우팅을 통해 렌더링된 여러 컴포넌트들을 한 번에 렌더링할 수 있도록 도와주는 역할을 한다.

단일 페이지라면 outlet컴포넌트 기능을 쓸 필요없다는 것을 안다.
하지만 한번이지만 페이지 이동이 있다면 어떨까 궁금했다.

이 부분이 궁금했던 이유는
나의 포트폴리오 페이지를 만드는데 활용해볼 수 있을까 하는 생각에서다.

chat GPT의 답변은
Outlet은 최소한 두 개 이상의 페이지가 존재하는 다중 페이지 구성에서 사용됩니다. 예를 들어, 대부분의 웹 애플리케이션에서는 최소한 홈페이지와 로그인 페이지가 있으므로, 이 경우 Outlet을 사용할 수 있습니다.

여기서 문제는 단일페이지로 구성된 페이지와 로그인 페이지 단 두개의 페이지라면 outlet을 사용하는 것이 나은가가 궁금해졌는데
로그인 페이지와 홈페이지의 컴포넌트를 조건부 렌더링하여 로그인한 사용자에게는 홈페이지를 보여주고, 로그인하지 않은 사용자에게는 로그인 페이지를 보여주는 식으로 구현하는 것이 더 효율적이라는 답변이 돌아왔다.

이 조건부 렌더링은 App.js에서 로그인 상태를 state로 관리해서
로그인이true이면 home 아니면 login 으로 렌더링해주면 된다.