🌟 하단 네비게이션 바(Bottom Navigation Bar) 만들기

목표

1. React에서 react-router-dom을 사용하여 하단 네비게이션 바를 만들어보자
2. FontAwesome 아이콘을 사용하여 적용해보자
3. 다른 페이지를 라우팅해보자

---

1. BottomNav 컴포넌트 생성

먼저 BottomNav.jsx와 BottomNav.css 파일을 생성하자

BottomNav.jsx

import React from "react";

const BottomNav = () => {
    return (
        <nav className="container">
            <div>button1</div>
            <div>button2</div>
            <div>button3</div>
            <div>button4</div>
            <div>button5</div>
        </nav>
    );
};

export default BottomNav;

BottomNav.css

/* 네비게이션 바 스타일 */
/* nav태그 아래의 자식들을 수평 정렬하기 위한 설정 */
nav {
  overflow: hidden;
  border-top: 2px solid grey;
  background-color: white;
}

/* 버튼 스타일 */
/* nav태그 아래의 div태그들을 수평정렬 및 세로길이 설정 */
nav > div {
  float: left;
  width: 20%;
  text-align: center;
  height: 45px;
  line-height: 45px;
}

---

2. 아이콘 추가하기

아이콘을 추가하기 위해 FontAwesome 라이브러리를 설치합니다.

🛠 패키지 설치

npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/react-fontawesome@latest

FontAwesome.jsx 파일 생성 및 설정

// 라이브러리
import { library } from "@fortawesome/fontawesome-svg-core";
// 사용할 아이콘 import
import { faHouse, faCalendar, faList, faBook, faEllipsis } from "@fortawesome/free-solid-svg-icons";

// 아이콘을 라이브러리에 추가
library.add(faHouse, faCalendar, faList, faBook, faEllipsis);

---

3. 하단 네비게이션 바에 아이콘 추가

BottomNav.jsx에서 아이콘을 적용합니다.

import React from "react";
import "./BottomNav.css";
import "./FontAwesome";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const BottomNav = () => {
    return (
        <nav className="wrapper">
            <div><FontAwesomeIcon icon="house" /></div>
            <div><FontAwesomeIcon icon="calendar" /></div>
            <div><FontAwesomeIcon icon="list" /></div>
            <div><FontAwesomeIcon icon="book" /></div>
            <div><FontAwesomeIcon icon="ellipsis" /></div>
        </nav>
    );
};

export default BottomNav;

---

4. React Router 적용하기

하단 네비게이션 바를 누르면 해당 페이지로 이동하도록 설정합니다.

🛠 react-router-dom 설치

npm install react-router-dom

📂 main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import BottomNav from "./BottomNav.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <BottomNav />
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

---

5. 하단 네비게이션 바에 링크 적용

아이콘을 클릭하면 해당 페이지로 이동하도록 설정합니다.

📂 BottomNav.jsx 수정

import { Link } from "react-router-dom";
import "./BottomNav.css";
import "./FontAwesome";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const BottomNav = () => {
    return (
        <nav className="wrapper">
            <div><Link to="/"><FontAwesomeIcon icon="house" /></Link></div>
            <div><Link to="/calendar"><FontAwesomeIcon icon="calendar" /></Link></div>
            <div><Link to="/todolist"><FontAwesomeIcon icon="list" /></Link></div>
            <div><Link to="/diary"><FontAwesomeIcon icon="book" /></Link></div>
            <div><Link to="/more"><FontAwesomeIcon icon="ellipsis" /></Link></div>
        </nav>
    );
};
export default BottomNav;

---

6. 선택된 아이콘만 색상을 변경

어떤 아이콘이 선택되었는지 표시해 주기 위해 useState를 사용하여 선택된 아이콘의 색상을 변경합니다.

📂BottomNav.jsx

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./BottomNav.css";
import "./FontAwesome";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const BottomNav = () => {
    const [activeNav, setActiveNav] = useState(1);
    return (
        <nav className="wrapper">
            <div>
                <Link to="/" onClick={() => setActiveNav(1)}>
                    <FontAwesomeIcon icon="house" className={activeNav === 1 ? "active" : ""} />
                </Link>
            </div>
            <div>
                <Link to="/calendar" onClick={() => setActiveNav(2)}>
                    <FontAwesomeIcon icon="calendar" className={activeNav === 2 ? "active" : ""} />
                </Link>
            </div>
        </nav>
    );
};
export default BottomNav;

📂 BottomNav.css

.nav-item { color: gray; }
.active { color: black; }

---

완성

Thanks To. https://velog.io/@gym