React를 사용하여 접을 수 있는 탐색 메뉴를 만드는 방법

사이드바 탐색 메뉴는 일반적으로 링크의 수직 목록으로 구성됩니다. react-router-dom을 사용하여 React에서 링크 세트를 생성할 수 있습니다.

머티리얼 UI 아이콘이 포함된 링크가 있는 React 사이드 탐색 메뉴를 만들려면 다음 단계를 따르세요. 링크를 클릭하면 링크가 다른 페이지를 렌더링합니다.

React 애플리케이션 만들기

이미 가지고 있는 경우 반응 프로젝트 , 다음 단계로 건너뛰어도 됩니다.

MAKEUSEOF 오늘의 비디오

create-react-app 명령을 사용하여 React를 빠르게 시작하고 실행할 수 있습니다. 그것은 당신을 위해 모든 종속성과 구성을 설치합니다.

다음 명령어를 실행하여 react-sidenav라는 React 프로젝트를 생성합니다.

npx create-react-app react-sidenav

시작하기 위해 일부 파일이 있는 react-sidenav 폴더가 생성됩니다. 이 폴더를 약간 정리하려면 src 폴더로 이동하여 App.js의 내용을 다음과 같이 바꾸세요.

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

생성할 탐색 구성 요소는 다음과 같습니다.

매우 간단하지만 완료되면 필요에 맞게 수정할 수 있어야 합니다. 상단의 이중 화살표 아이콘을 사용하여 탐색 구성 요소를 축소할 수 있습니다.

핀터레스트에서 사진을 저장하는 방법

축소되지 않은 보기를 만드는 것으로 시작합니다. 화살표 아이콘 외에도 사이드바에는 항목 목록이 포함되어 있습니다. 이러한 각 항목에는 아이콘과 일부 텍스트가 있습니다. 각각에 대한 요소를 반복적으로 생성하는 대신 배열에 각 항목에 대한 데이터를 저장한 다음 map 함수를 사용하여 반복할 수 있습니다.

시연하기 위해 lib라는 새 폴더를 만들고 navData.js라는 새 파일을 추가합니다.

import HomeIcon from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore'; 
import BarChartIcon from '@mui/icons-material/BarChart'; 
import SettingsIcon from '@mui/icons-material/Settings'; 
  
export const navData = [ 
    { 
        id: 0, 
        icon: <HomeIcon/>, 
        text: "Home", 
        link: "/" 
    }, 
    { 
        id: 1, 
        icon: <TravelExploreIcon/>, 
        text: "Explore", 
        link: "explore" 
    }, 
    { 
        id: 2, 
        icon: <BarChartIcon/>, 
        text: "Statistics", 
        link: "statistics" 
    }, 
    { 
        id: 3, 
        icon: <SettingsIcon/>, 
        text: "Settings", 
        link: "settings" 
    } 
]

위에 사용된 아이콘은 Material UI 라이브러리에서 가져온 것이므로 다음 명령을 사용하여 먼저 설치하십시오.

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

다음으로 라는 폴더를 만듭니다. 구성품 라는 새 구성 요소를 추가하십시오. Sidenav.js .

이 파일에서 ../lib에서 navData를 가져와서 뼈대를 만듭니다. 시데네브 기능:

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
}

링크를 생성하려면 이 구성 요소의 div 요소를 다음과 같이 수정합니다.

<div> 
    <button className={styles.menuBtn}> 
        <KeyboardDoubleArrowLeftIcon /> 
    </button> 
    {navData.map(item =>{ 
        return <div key={item.id} className={styles.sideitem}> 
	                {item.icon} 
	                <span className={styles.linkText}>{item.text}</span> 
		       </div> 
        })} 
 </div>

이 구성 요소는 지도 기능의 각 반복에 대한 아이콘과 링크 텍스트를 포함하는 탐색 링크를 만듭니다.

버튼 요소는 Material UI 라이브러리의 왼쪽 화살표 아이콘을 보유합니다. 이 코드를 사용하여 구성 요소의 맨 위에서 가져옵니다.

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';

또한 클래스 이름이 스타일 객체를 참조한다는 사실을 눈치채셨을 수도 있습니다. 이 튜토리얼에서는 CSS 모듈을 사용하기 때문입니다. CSS 모듈을 사용하면 React에서 로컬 범위 스타일을 만들 수 있습니다. . 이 프로젝트를 시작하기 위해 create-react-app을 사용했다면 아무것도 설치하거나 구성할 필요가 없습니다.

Components 폴더에서 다음이라는 새 파일을 만듭니다. sidenav.module.css 다음을 추가하십시오.

.sidenav { 
    width: 250px; 
    transition: width 0.3s ease-in-out; 
    height: 100vh; 
    background-color: rgb(10,25,41); 
    padding-top: 28px; 
} 
  
.sidenavd { 
    composes: sidenav; 
    transition: width 0.3s ease-in-out; 
    width: 60px 
} 
  
.sideitem { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    cursor: pointer; 
    color: #B2BAC2; 
    text-decoration: none; 
} 
  
.linkText { 
    padding-left: 16px; 
} 
  
.linkTextd { 
    composes: linkText; 
    visibility: hidden; 
} 
  
.sideitem:hover { 
    background-color: #244f7d1c; 
} 
  
.menuBtn { 
    align-self: center; 
    align-self: flex-start;   
    justify-self: flex-end; 
    color: #B2BAC2; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-left: 20px; 
}

React 라우터 설정

map 함수가 반환하는 div 요소는 링크여야 합니다. React에서는 react-router-dom을 사용하여 링크와 경로를 생성할 수 있습니다.

TV에서 넷플릭스에서 로그아웃하는 방법

터미널에서 npm을 통해 react-router-dom을 설치합니다.

npm install react-router-dom@latest

이 명령은 최신 버전의 react-router-dom을 설치합니다.

Index.js에서 앱 구성 요소를 라우터로 래핑합니다.

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
  
root.render( 
  <React.StrictMode> 
    <BrowserRouter> 
	    <App /> 
    </BrowserRouter> 
  </React.StrictMode> 
);

다음으로 App.js에서 경로를 추가합니다.

import { 
  BrowserRouter, 
  Routes, 
  Route, 
} from "react-router-dom"; 
  
import './App.css'; 
import Sidenav from './Components/Sidenav'; 
import Explore from "./Pages/Explore"; 
import Home from "./Pages/Home"; 
import Settings from "./Pages/Settings"; 
import Statistics from "./Pages/Statistics"; 
  
function App() { 
  return ( 
    <div className="App"> 
      <Sidenav/> 
      <main> 
        <Routes> 
          <Route  path="/" element={<Home />}/> 
          <Route path="/explore" element={<Explore />} /> 
          <Route path="/statistics" element={<Statistics />}/> 
          <Route path="/settings" element={<Settings />} /> 
        </Routes> 
      </main> 
    </div> 
  ); 
} 
export default App;

이러한 스타일로 App.css를 수정하십시오.

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
}

각 경로는 전달된 URL에 따라 다른 페이지를 반환합니다. 경로 소품 . Pages라는 새 폴더를 만들고 홈, 탐색, 통계 및 설정 페이지의 네 가지 구성 요소를 추가합니다. 다음은 예입니다.

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
}

/home 경로를 방문하면 '홈'이 표시되어야 합니다.

사이드바의 링크를 클릭하면 일치하는 페이지로 연결되어야 합니다. Sidenav.js에서 div 요소 대신 react-router-dom의 NavLink 구성 요소를 사용하도록 맵 기능을 수정합니다.

{navData.map(item => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})}

파일 상단에서 NavLink를 가져오는 것을 잊지 마십시오.

import { NavLink } from "react-router-dom";

NavLink는 to prop을 통해 링크의 URL 경로를 받습니다.

여기까지는 탐색 모음이 열려 있습니다. 접을 수 있도록 하려면 사용자가 화살표 버튼을 클릭할 때 CSS 클래스를 변경하여 너비를 토글할 수 있습니다. 그런 다음 CSS 클래스를 다시 변경하여 열 수 있습니다.

이 토글 기능을 사용하려면 사이드바가 열리고 닫힐 때를 알아야 합니다.

이를 위해 useState 후크를 사용합니다. 이것 반응 후크 기능 구성 요소의 상태를 추가하고 추적할 수 있습니다.

라즈베리파이에 고정아이피 설정

sideNav.js에서 열린 상태에 대한 후크를 만듭니다.

EA51AEF81376372D47EFFCC1E3FE8A9369CDDFB6

열기 상태를 true로 초기화하면 애플리케이션을 시작할 때 사이드바가 항상 열려 있습니다.

다음으로 이 상태를 토글할 함수를 만듭니다.

const toggleOpen = () => { 
    setopen(!open) 
}

이제 open 값을 사용하여 다음과 같은 동적 CSS 클래스를 만들 수 있습니다.

<div className={open?styles.sidenav:styles.sidenavd}> 
    <button className={styles.menuBtn} onClick={toggleOpen}> 
            {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />} 
    </button> 
    {navData.map(item =>{ 
        return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
                  {item.icon} 
                   <span className={open?styles.linkText:styles.linkTextd}>{item.text}</span> 
               </NavLink> 
     })} 
</div>

사용된 CSS 클래스 이름은 열린 상태에 따라 결정됩니다. 예를 들어 open이 true이면 외부 div 요소는 sidenav 클래스 이름을 갖습니다. 그렇지 않으면 클래스는 sidenavd가 됩니다.

사이드바를 닫으면 오른쪽 화살표 아이콘으로 바뀌는 아이콘도 마찬가지입니다.

가져오는 것을 기억하십시오.

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';

이제 사이드바 구성 요소를 접을 수 있습니다.

여기에서 전체 코드를 가져옵니다. GitHub 저장소 직접 시도하십시오.

React 컴포넌트 스타일링하기

React를 사용하면 접을 수 있는 탐색 구성 요소를 쉽게 구축할 수 있습니다. react-router-dom과 같이 React가 제공하는 일부 도구를 사용하여 라우팅을 처리하고 후크를 사용하여 접힌 상태를 추적할 수 있습니다.

CSS 모듈을 사용하여 구성 요소의 스타일을 지정할 수도 있지만 반드시 그래야 하는 것은 아닙니다. 그것들을 사용하여 고유하고 사용하지 않는 경우 번들 파일에서 흔들 수 있는 로컬 범위 클래스를 생성합니다.

React를 사용하여 접을 수 있는 탐색 메뉴를 만드는 방법

React 애플리케이션 만들기

탐색 구성 요소 만들기

React 라우터 설정

탐색 링크 수정

React 컴포넌트 스타일링하기