📱네비게이션 바 제작

🔍 문제 정의

프로젝트 초기 단계에서 사용자들이 앱 내에서 손쉽게 이동할 수 있도록 네비게이션 바를 구현해야 했다. 여러 화면을 오가는 앱의 특성상, 직관적이고 사용하기 쉬운 네비게이션 바는 매우 중요한 부분이었기 때문에, 이를 잘 구현하는 것이 핵심이었다.

💻 코드 리뷰

이번에는 하단 네비게이션 바를 구현한 코드를 리뷰해보겠다. 코드의 주요 기능은 화면을 전환할 때 활성화된 아이콘을 시각적으로 구분할 수 있도록 하는 것이다.

import React, { useState } from "react"
import home from '../../assets/home.png'
import community from '../../assets/community.png'
import sell from '../../assets/sell.png'
import chatting from '../../assets/chatting.png'
import profile from '../../assets/profile.png'
import { Link } from "react-router-dom"
import './BottomNav.css'


const BottomNav = () => {
    const [activeNav, setActiveNav] = useState(1);  // 활성화된 네비게이션 아이템 상태 관리

    return (
        <nav className="wrapper">
            <Link to="/home" className="nav-link" onClick={() => setActiveNav(1)}>
                <div>
                    <img src={home}
                        className={activeNav === 1 ? "nav-item active" : "nav-item"}
                        style={{ width: '30%', height: 'auto' }} />
                </div>
            </Link>
            <Link to="/community" className="nav-link" onClick={() => setActiveNav(2)}>
                <div>
                    <img src={community}
                        className={activeNav === 2 ? "nav-item active" : "nav-item"}
                        style={{ width: '30%', height: 'auto' }} />
                </div>
            </Link>
            <Link to="/sell" className="nav-link" onClick={() => setActiveNav(3)}>
                <div>
                    <img src={sell}
                        className={activeNav === 3 ? "nav-item active" : "nav-item"}
                        style={{ width: '30%', height: 'auto' }} />
                </div>
            </Link>
            <Link to="/chatting" className="nav-link" onClick={() => setActiveNav(4)}>
                <div>
                    <img src={chatting}
                        className={activeNav === 4 ? "nav-item active" : "nav-item"}
                        style={{ width: '30%', height: 'auto' }} />
                </div>
            </Link>
            <Link to="/profile" className="nav-link" onClick={() => setActiveNav(5)}>
                <div>
                    <img src={profile}
                        className={activeNav === 5 ? "nav-item active" : "nav-item"}
                        style={{ width: '30%', height: 'auto' }} />
                </div>
            </Link>
        </nav>
    );
};
export default BottomNav;

✨ 알게 된 점

useState를 사용해 현재 활성화된 네비게이션 항목을 관리할 수 있었다. 이는 앱에서 사용자가 어느 화면에 있는지 쉽게 추적할 수 있도록 해주었다.
각 네비게이션 항목은 Link 컴포넌트를 사용하여 라우팅을 구현했으며, 아이콘이 클릭될 때마다 setActiveNav 함수로 활성화된 항목을 변경했다.
CSS로 active 클래스를 적용하여, 어떤 항목이 현재 선택되었는지 시각적으로 구분할 수 있게 했다. 이 부분이 사용자 경험을 높여주었다.

🔄 지금 생각했을 때 개선할 점

동적 스타일링: 각 아이콘의 스타일을 style 속성 대신, styled-components로 관리하면 더 유연하고 확장 가능한 코드가 될 것 같다. 현재는 각각의 아이콘에 대해 일일이 스타일을 넣고 있는데, styled-components를 활용하면 코드 중복을 줄일 수 있다.

⚡ 결론

네비게이션 바는 사용자 경험에서 중요한 역할을 한다. 이번 구현을 통해 기본적인 기능은 잘 작동했지만, 향후 더 나은 코드 구조와 접근성 개선을 통해 보다 완성도 높은 네비게이션 바를 만들 수 있을 것이다.