React-SideBar

사용한 라이브러리

$ npm i styled-components
$ npm install react-icons —save 

styled-components?

styled-components는 JS에서 CSS를 사용할 수 있도록 도와주는 스타일링 프레임워크입니다.
React Component에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고, javascript에 영향을 받는 스타일링을 간편하게 구현할 수 있습니다.

기존 React에서 사용하던 CSS 방식

  const divStyle = {
    backgroundColor: "black",
    width: "100px",
    height: "100px"
  };

  return <div style={divStyle}></div>

Styled-Components를 사용한 방식

  const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

return <StyledDiv></StyledDiv>

styled-components는 style이 적용된 Component를 직접 생성하기 때문에, 스타일링을 위한 코드 사용량이 줄어드는 효과가 있습니다.

React Icon

웹페이지를 구현할때 react-icons을 사용하면 빠르게 아이콘을 넣을 수 있습니다.

import { 아이콘 이름 } from 'react-icons/아이콘 카테고리';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

React-SideBar 파일구조

---

📂 node_modules

• package.json에 있는 모듈이 의존하고 있는 모듈 전부를 포함하고 있습니다

---

📂 public

• index.html (가상 DOM을 위한 html 파일)
• data (mock data관리)

---

📂 src

📄 index.js
📄 App.js
📄 reportWebVitals.js
📄 App.css
📁 components
📄 Sidebar.js
📄 SidebarData.js
📄 Overview.js
📁 pages
📄 Reports.js
📄 Reports.js
📄 Team.js

---

오류수정

react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원을 안한다.
또한 component도 element로 바꼈다.

import { BrowserRouter as Router, Routes, Route }from 'react-router-dom';

function App() {  
  return (
    <Router>
      <Sidebar />
      <Routes> // Switch -> Routes
        <Route path='/overview' exact element={<Overview />} />
        <Route path='/reports' exact element={<Reports/>} />
        <Route path='/reports/reports1' exact element={<ReportsOne/>} />
        <Route path='/reports/reports2' exact element={<ReportsTwo/>} />
        <Route path='/reports/reports3' exact element={<ReportsThree/>} />
        <Route path='/team' exact element={<Team/>} />
      </Routes>
    </Router>
  );
}

export default App; 

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
      	<!-- React Router Dom v6 - 함수는 React 자식으로 유효하지 않습니다.-->
        <!-- <Route path='/overview' exact element={Overview} />        
        <Route path='/reports' exact element={Reports} />
        <Route path='/reports/reports1' exact element={ReportsOne} />
        <Route path='/reports/reports2' exact element={ReportsTwo} />
        <Route path='/reports/reports3' exact element={ReportsThree} />
        <Route path='/team' exact element={Team} />
      </Routes>
    </Router>
  );
}
export default App;

// element={Overview} -> element={<Overview />}
// 참고: React Router Dom v6 - Functions are not valid as a React child