React에서 고정 Navbar 구현

매년 더 많은 사용자가 데스크탑에서 탐색에서 더 작은 화면으로 이동합니다. 또한 사람들은 인터넷 검색 시 사용자 경험에 대한 기대치가 높아지고 있습니다.

웹 개발자는 사용자의 변화하는 습관에 적응해야 합니다. 웹 사이트는 모바일 사용자에게 더욱 반응적이고 적응되고 있습니다.

고정 탐색 모음은 최신 웹 애플리케이션의 일반적인 기능입니다. 사용자가 메뉴에 액세스하기 위해 위로 스크롤하지 않고도 페이지 사이를 쉽게 탐색할 수 있습니다.

React에서 고정 Navbar 구현

React는 JavaScript 기반 프레임워크입니다. 템플릿 언어 JSX를 사용하는데, 이는 HTML과 유사해 보이지만 몇 가지 면에서 다릅니다.

예를 들어 JSX 코드 내에서 JavaScript를 사용할 수 있습니다. JSX에서는 className 속성을 사용한다는 점을 제외하면 HTML과 유사한 스타일을 지정할 수 있습니다.

React에서 고정 navbar를 구현하려면 먼저 일반 navbar가 있어야 합니다. 언뜻 보기에 JSX 코드는 HTML과 구분할 수 없을 것 같습니다.

예:

export default function App() {
    return (
        <div className="App">
            <nav>
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">FAQ</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    );
}

네 개의 메뉴 항목이 있는 간단한 탐색 모음입니다. 이 라이브 데모를 방문하면 어떻게 보이는지 확인할 수 있습니다.

이 예제에는 <nav> HTML 요소가 있어 React에서 탐색하는 데 도움이 됩니다. 또한 각 메뉴 항목을 나타내는 정렬되지 않은 목록과 목록 항목이 있습니다.

기술적으로는 <span> 메뉴 항목이 있는 일반 <div> 컨테이너일 수 있지만 이는 탐색 메뉴를 만드는 데 널리 사용되는 접근 방식입니다.

나머지 작업은 CSS에서 수행해야 합니다. CSS의 position 속성과 top 속성을 사용하여 navbar를 맨 위에 정렬합니다.

구체적으로 말하면 스타일시트에 다음 규칙을 추가해야 합니다.

nav {
    position: sticky;
    top: 0;
}

CSS의 위치 속성을 사용하면 특정 요소가 화면에 배치되는 방식을 지정할 수 있습니다. 자세한 내용은 공식 MDN 문서에서 확인할 수 있습니다.

<ul> 요소를 탐색 모음처럼 보이게 하려면 목록 항목에서 점을 제거하고 가로로 쌓아야 합니다. 배경, 너비 및 높이와 같은 다른 navbar 요소의 스타일도 지정할 수 있습니다.