2. 리액트(React) favicon, Navbar 추가하기(boot-strap 설치, 적용)

1. 코드 정리하기

2022.01.21 - [Web/React] - 1. 리액트(React) 프론트엔드 시작하기

이전 글에 이어서 리액트에 Navbar를 적용하는 방법을 정리

초반에 자동으로 만들어진 react프로젝트는 불필요 없는 부분이 많기 때문에 필요한 부분만 남기고 다 지운다

src폴더에서 App.js, index.js만 남기고 다 지운다

 

- index.js

메인 프로그램인 index.js

ReactDOM.render를 통해 App컴포넌트를 랜더링 한다

 

- App.js

App.js에 와서 출력하고 싶은 JSX코드를 작성한다

 

 

결과

 

h태그로 작성한 Hello React!가 잘 출력된다

 

 

- index.html

이번에는 public 폴더에 들어가 있는 index.html 코드를 수정하여 브라우저 파비콘이랑 타이틀을 수정

favicon, title 수정

index.html에 있는 5, 27 줄에 있는 코드를 수정해준다

 

리액트 favicon, titile 수정 결과

웹사이트 주소창에 표시되는 아이콘이랑 사이트 이름이 수정된걸 확인할 수 있다

 

반응형

 

2. Navbar 넣기

 

직접만들면 시간이 오래 걸리니까 bootstrap에 있는 Nabar를 적용했다

 

1. bootstrap 설치

 

npm install react-bootstrap

 

2. import 

import { Navbar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

 

https://react-bootstrap.github.io/components/navbar/

React-Bootstrap

 

 

 

위의 사이트에서 원하는 디자인을 골라 적용한다

 

내가 적용할 Navbar, Copy 버튼을 눌러 쉽게 가져올 수 있다.

 

- src 폴더에 NavBar.js를 추가해 NavBar함수 컴포넌트를 만들어준 뒤 App.js에서 불러온다

 

 

결과

PC버전

 

모바일 버전(Dropdown)