React - outlet을 활용한 navigation bar 구현하기

React 프로젝트를 개발할 때 Navigation Bar를 구현하는 것은 흔한 일입니다. 사실 대부분의 웹 페이지에서는 Navigation Bar가 필수적인 요소로 사용됩니다. 현재 진행중인 프로젝트에서도 Navigation Bar를 사용해야 하는데 모든 컴포넌트에 Nav Bar를 적용시키면 번거로운 작업이기 때문에 App.tsx에 적용시켜 전역으로 사용하도록 했습니다. function App() { return ( <> <NavBar /> <Router> <Routes> <Route path="/" element={<UserWelcome />} /> </Routes> </Router> </> ); } 하지만 문제가 있었습니다. Nav Bar가 없는 컴포넌트도 존재하고 또 다른 형태의 Nav Bar를 가진 컴포넌트도 존재했습니다. 그래서 컴포넌트의 pathName을 기준으로 조건부로 Nav Bar를 보여주도록 만들었습니다. export default function NavBar()...

원문링크 : React - outlet을 활용한 navigation bar 구현하기