[React] Router로 Navbar를 만들어보자
React 시작하기
리액트 프로젝트를 생성하는 create-react-app
명령을 설치
이제 global로 설치해서 다음 리액트 만들때는 안해도됨
npm install -g create-react-app
npx 로 프로젝트를 생성해야하므로 npm으로 npx 설치
npm install npx -g
프로젝트 생성 (buur)
프로젝트 이름으로 영어 대문자 사용 불가능
npx create-react-app [프로젝트 이름]
프로젝트 실행
cd [프로젝트 이름]
npm start
http://localhost:3000/
주소 브라우저 열림
불필요한 파일 제거
- src/App.js
- src/App.css
- src/App.test.js
- src/logo.svg
생성할 폴더
- src/components: 컴포넌트들이 위치하는 디렉토리입니다.
- src/pages: 각 라우트들이 위치하는 디렉토리 입니다.
- src/client: 브라우저 측에서 사용할 최상위 컴포넌트 입니다. 우리가 추후 서버사이드 렌더링을 구현 할 것이기 때문에 디렉토리를 따로 구분하였습니다. (서버사이드 렌더링을 할 때에는 서버 전용 라우터를 써야합니다.) 여기서 라우터를 설정합니다.
- src/server: 서버측에서 사용 할 리액트 관련 코드를 여기에 넣습니다.
- src/shared: 서버와 클라이언트에서 공용으로 사용되는 컴포넌트 App.js 가 여기에 위치합니다.
- src/lib: 나중에 웹 연동을 구현 할 때 사용 할 API와 코드스플리팅 할 때 필요한 코드가 여기에 위치합니다.
Root.js > App.js > pages or components
Component 모듈화
Root.js
> App.js
를 최상위 Class로 하여 사용
Nav
로
Home / Recommend / Search / Mypage
이동할 것임
Router 이용하기
react-router-dom : 브라우저에서 사용되는 리액트 라우터
npm install react-router-dom --save
이후에 <router> inside another <router>
에러가 발생하여 다운그레이드 해줌
npm install react-router-dom@5.3.0
Root.js
를 Root.js
에 import하여 App
을 감싸준다
// src/client/Root.js
import React from "react";
import App from '../App';
import { BrowserRouter } from 'react-router-dom';
const Root = () => (
<BrowserRouter>
<App/>
</BrowserRouter>
);
export default Root;
App.js
// src/App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from './pages/Home';
import Recommend from './pages/Recommend';
import Search from './pages/Search';
import MyPage from './pages/MyPage';
import Nav from './components/Nav';
import './styles/common/App.css';
class App extends React.Component {
render() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/recommend" component={ Recommend} />
<Route path="/search" component={ Search} />
<Route path="/mypage" component={MyPage} />
</Switch>
<Nav />
</div>
)
}
}
export default App;
// src/styles/common/App.css
* {
box-sizing: border-box;
}
.app {
width: 100%;
height: 100%;
}
Nav.js
// src/components/Nav.js
import React from "react";
import { NavLink } from "react-router-dom";
import '../styles/common/Nav.css'
const Nav = () => {
return (
<nav>
<div>
<NavLink to="/">
Home
</NavLink>
</div>
<div>
<NavLink to="/recommend">
Recommend
</NavLink>
</div>
<div>
<NavLink to="/search">
Search
</NavLink>
</div>
<div>
<NavLink to="/mypage">
MyPage
</NavLink>
</div>
</nav>
);
};
export default Nav;
// src/styles/common/Nav.css
nav {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
display: flex;
border: solid 2px;
}
nav > div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Pages 폴더에는 router에 관련된 파일들을 넣어줌
형식다 같음
Home
/ MyPages
/ Recommend
/ Search
// src/pages/...
import React from "react";
class Home extends React.Component {
render () {
return (
<h1>Home</h1>
)
}
}
export default Home;
실행 결과
참고
Author And Source
이 문제에 관하여([React] Router로 Navbar를 만들어보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ohsg97/React-Router로-Navbar를-만들어보자저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)