안녕하세요! React 애플리케이션을 위한 멋진 탐색 모음(navbar)을 만들 준비가 되셨나요? 이 가이드에서는 디자인 고려 사항부터 구현 및 접근성 모범 사례에 이르기까지 모든 것을 안내합니다. 뛰어들어 보세요!
Navbar가 왜 중요한가요?
navbar는 모든 웹 애플리케이션의 중요한 요소입니다. 이를 통해 사용자는 사이트의 다양한 페이지와 섹션을 탐색할 수 있습니다. 잘 디자인된 탐색 모음이 없으면 사용자는 쉽게 길을 잃거나 좌절감을 느낄 수 있으므로 탐색 모음에 필요한 모든 링크와 접근성 기능이 있는지 확인하는 것이 중요합니다.
주요 시사점
필수 요소: 탐색 모음은 사용자가 웹사이트를 탐색하는 데 필수적입니다.
재사용 가능한 구성 요소: React는 재사용 가능한 모듈식 구성 요소를 만드는 데 적합하며 탐색 모음을 만드는 데 적합합니다.
접근성 문제: 탐색 표시줄에 접근할 수 있도록 보장하면 장애가 있는 사용자를 포함한 모든 사용자가 사이트를 효과적으로 탐색할 수 있습니다.
Navbar 란 무엇입니까?
navbar는 일반적으로 웹페이지 상단이나 측면에 위치한 사용자 인터페이스 요소입니다. 이는 사용자가 웹사이트 내의 다른 섹션이나 페이지에 액세스할 수 있는 링크나 버튼을 제공하는 탐색 보조 도구 역할을 합니다. 잘 디자인된 탐색 모음은 사용자가 사이트 구조를 이해하고 해당 부분 간에 쉽게 이동할 수 있도록 도와줍니다.
잘 디자인된 Navbar의 예
에어비앤비: "숙박할 장소", "체험", "온라인 체험"과 같은 섹션에 대한 명확한 링크가 있는 깔끔하고 미니멀한 디자인.
Dropbox: 간단하면서도 효과적이며 눈에 띄는 '제품' 드롭다운 메뉴를 통해 다양한 제품을 탐색할 수 있습니다.
React에서 Navbar 만들기
'ShopNow'라는 전자상거래 웹사이트용 탐색바를 만들어 보겠습니다.
1단계: Navbar 디자인
코딩을 시작하기 전에 디자인을 계획해 봅시다. ShopNow의 기능은 다음과 같습니다.
왼쪽 로고
"제품", "회사 소개", "연락처" 등의 섹션에 대한 링크
상품 수를 보여주는 배지가 있는 장바구니 아이콘
"로그인" 및 "내 계정"과 같은 계정 작업을 위한 사용자 아이콘
다음은 실제 모습에 대한 모형입니다.
로고: 왼쪽의 "ShopNow"
링크: 중간에 "제품", "회사 소개", "연락처"
아이콘: 오른쪽에 장바구니와 사용자 아이콘
2단계: React 프로젝트 설정
먼저 Create React App을 사용하여 새 React 프로젝트를 설정합니다.
1
2
3
npx create-react-app shopnow
cd shopnow
npm start
로그인 후 복사
3단계: Navbar 구성요소 생성
src 디렉터리에 Navbar.js라는 새 파일을 만들고 다음 코드를 추가합니다.
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import './Navbar.css';
constNavbar = () => {
return(
<nav className="navbar">
{/* Navbar content goes here */}
</nav>
);
};
export defaultNavbar;
로그인 후 복사
이제 동일한 디렉토리에 Navbar.css 파일을 생성하여 navbar 스타일을 지정합니다.
4단계: Navbar 구조 추가하기
Navbar 구성 요소 내부에 navbar 구조를 추가합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import './Navbar.css';
constNavbar = () => {
return(
<nav className="navbar">
<div className="navbar-left">
<a href="/"className="logo">
ShopNow
</a>
</div>
<div className="navbar-center">
<ul className="nav-links">
<li><a href="/products">Products</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div className="navbar-right">
<a href="/cart"className="cart-icon">
<i className="fas fa-shopping-cart"></i>
<span className="cart-count">0</span>
</a>
<a href="/account"className="user-icon">
<i className="fas fa-user"></i>
</a>
</div>
</nav>
);
};
export defaultNavbar;
로그인 후 복사
이 코드는 탐색 모음을 세 개의 섹션으로 나눕니다. 왼쪽은 로고, 중앙은 탐색 링크, 오른쪽은 아이콘입니다.
5단계: Navbar 스타일 지정
Navbar.css를 열고 다음 스타일을 추가하세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 1rem;
}
.navbar-left .logo {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.navbar-center .nav-links {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
.navbar-center .nav-links li {
margin-right: 1rem;
}
.navbar-center .nav-links a {
color: #fff;
text-decoration: none;
}
.navbar-right {
display: flex;
align-items: center;
}
.navbar-right .cart-icon,
.navbar-right .user-icon {
color: #fff;
text-decoration: none;
margin-left: 1rem;
position: relative;
}
.navbar-right .cart-count{
background-color: #f44336;
color: #fff;
border-radius: 50%;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
position: absolute;
top: -0.5rem;
right: -0.5rem;
}
로그인 후 복사
6단계: Navbar 가져오기 및 렌더링
마지막으로 Navbar 구성 요소를 가져와 App.js 파일에 렌더링합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import Navbar from './Navbar';
functionApp() {
return(
<div>
<Navbar />
{/* Rest of your app content goes here */}
</div>
);
}
export defaultApp;
로그인 후 복사
이제 React 앱을 실행하면 페이지 상단에 탐색 메뉴가 표시됩니다.
7단계: 접근성 향상
접근성은 모든 사용자가 사이트를 탐색할 수 있도록 하는 데 매우 중요합니다. 다음은 몇 가지 모범 사례입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
