[React] Navigation 만들기 (7) - SideBar 컴포넌트 만들기

src/component/Sidebar.js 생성

import Link from './Link';

function Sidebar(){
  const links = [
    {label : 'Main', path:'/'},
    {label : 'Signup', path:'/signup'},
  ];

  const renderedLinks = links.map((link)=>{
    return <Link key={link.labe} to ={link.path}>{link.label}</Link>
  });
  return(
    <div className='sticky top-0 overflow-y-scroll flex flex-col'>
      {renderedLinks}
    </div>
  );

}

export default Sidebar;

 

 

그리고 App.js에서 Link태그를 없애고 Sidebar를 추가한다

import MainPage from "./pages/MainPage";
import SignupPage from "./pages/SignupPage";
import Route from "./component/Route";
import Sidebar from "./component/Sidebar";

function App() {
    return (
        <div>
            <Sidebar></Sidebar> // 여기에 추가
            <div>
                <Route path="/">
                    <MainPage></MainPage>
                </Route>
                <Route path="/signup">
                    <SignupPage></SignupPage>
                </Route>
            </div>
        </div>
    )
}
export default App;

 

끝!

잘 된다