[React] Component 라이브러리 활용하여 반응형 메뉴바(NavBar) 만들기 (Ant-Design)

---

---

안녕하세요. 오늘은 Ant-Design 이라하는 React Component 라이브러리를 활용하여
페이지를 만들어보도록 하겠습니다. HTTP 디자인에서 BootStrap 이라는 라이브러리를 활용하여
디자인 하듯이 Ant-Design(antd) 라이브러리를 활용하면 쉽게 리액트 디자인을 할 수 있습니다.
 
먼저 해당 라이브러리 활용을 위해 아래 명령어를 통해 설치해줍니다. 
 
>> npm install antd
 
라이브러리 설치 후, package.json 에서 설치 확인을 해줍니다.

 
 
 

1. antd 라이브러리 공식 홈페이지 참조

antd 에서 제공하는 컴포넌트를 확인하기 위해 공식 홈페이지를 참고해줍니다.
기본적인 Button, Table 등부터 Menu, Dropdown 등의 컴포넌트도 활용할 수 있고
별도 icon 도 제공하니 필요한 컴포넌트를 import 해서 쓰시면 됩니다.
 
antd 에서 제공하는 컴포넌트는 아래 공식 홈페이지를 참고해주세요.
https://ant.design/

Ant Design - The world's second most popular React UI framework

 
 
 

2. antd 활용한 NavBar 만들기

저는 NavBar 활용을 위해 만들어진 Template 를 가져왔습니다.
NavBar 원 소스는 아래 Github 를 참고해주세요. 제작자님 감사합니다 :)
 
https://github.com/thisuraseniya/Ant-Design-Navbar/tree/main
 

 
위 깃헙의 NavBar 소스를 Local React Project 의 header 경로안에 넣었습니다. (빨간 박스 참고)
그리고 Main App 으로 사용될 ~/board/index.js 에서 NavBar 를 import 했는데요,
React 구동 후 NavBar 동작을 아래와 같이 확인할 수 있습니다.
 
- NavBar PC View

 
- NavBar Mobile View