[React] 맛집전공 프로젝트 - 사이드바 구현

디자이너분이 마이페이지 디자인을 위처럼 짜 주셔서 일단 고대로 퍼블리싱 해야 됐다
그래서 만들어야 했던 게 왼쪽에 있는 사이드바!

이 블로그를 참고해서 만들었다. react-router-dom 을 사용!

👩🏻‍💻 Sidebar 컴포넌트 생성

// src/components/Sidebar.js

import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import SidebarItem from "./SidebarItem";
import profile from "../assets/profile.png";

const Side = styled.div`
  display: flex;
  border-right: 1px solid #e0e0e0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
`
const Profile = styled.img`
  width: 150px;
  height: 150px;
  border-radius: 100%;
`
const Menu = styled.div`
  margin-top: 30px;
  width: 200px;
  display: flex;
  flex-direction: column;
`

function Sidebar() {
  const menus = [
    { name: "내가 쓴 리뷰", path: "/" },
    { name: "나만의 맛집 리스트", path: "/mylist" },
    { name: "즐겨찾기 한 맛집 리스트", path: "/likedlist" },
    { name: "설정", path: "/setting"}
  ];
  return (
    <Side>
      <Profile src={profile}></Profile>
      <Menu>
        {menus.map((menu, index) => {
          return (
            <NavLink
              exact
              style={{color: "gray", textDecoration: "none"}}
              to={menu.path}
              key={index}
              activeStyle={{color: "black"}}
            >
              <SidebarItem
                menu={menu}
              />
            </NavLink>
          );
        })}
      </Menu>
    </Side>
  );
}

export default Sidebar;

Side: 왼쪽 구역 div
ㄴ Menu: 메뉴 네 개 들어가는 div
   (map으로 return)
     ㄴ NavLink
        ㄴ p

원래는 그냥 Link였는데 찾아보니까 NavLink를 사용하면 링크가 활성화 되었을 때의 스타일값을 지정해줄 수가 있다고 해서 바꾸고 style={{color: "gray", textDecoration: "none"}}, activeStyle={{color: "black"}} 이렇게 값을 줬다.

👩🏻‍💻 pages 폴더에 각 페이지 컴포넌트 생성

전에 만들었던 App.js 내용 중에서 Contents 태그부터 다 Home.js로 복붙시켰다. 나머지 페이지에는 일단 제목만 넣어 놓음!

👩🏻‍💻 App.js에 Route 설정

// src/App.js

import React from "react";
import styled from "styled-components";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Header from "./components/Header";

import Sidebar from "./components/Sidebar";
import Home from "./pages/Home";
import MyList from "./pages/MyList";
import LikedList from "./pages/LikedList";
import Setting from "./pages/Setting";

const Center = styled.div`
  height: 92vh;
  display: flex;
  flex-direction: row;
`

class App extends React.Component {
  render() {
    return(
      <BrowserRouter>
        <Header/>
        <Center>
          <Sidebar/>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/mylist" component={MyList} />
            <Route path="/likedlist" component={LikedList} />
            <Route path="/setting" component={Setting} />
          </Switch>
        </Center>
      </BrowserRouter>
    );
  }
}

export default App;

BrowserRouter
ㄴ Header 헤더 컴포넌트
ㄴ Center 헤더 아래 부분 div
   ㄴ Sidebar 위에서 만든 컴포넌트
   ㄴ Switch
      ㄴ Route 네 개

👩🏻‍💻 결과물