[Front] React 소스 구현(6) - NavBar

본 게시글은 src/component/route/경로의 NavBar에 대한 소스 리뷰로써 개인적으로 진행하는 toy project의 일부입니다.

전체 소스

import React from 'react';

import AppBar from '@material-ui/core/AppBar';
import ToolBar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';


const NavBar=()=>{
	return(
		<div>
			<AppBar position="static">
				<ToolBar>
					<IconButton edge="start" color="inherit" aria-label="Menu">
						<MenuIcon/>
					</IconButton>
					<Typography variant="h6" style={style}>
						React User Application
					</Typography>
					<Button color="inherit">Login</Button>
				</ToolBar>
			</AppBar>
		</div>
	);
}

const style={
	flexGrow:1
}
export default NavBar;

roll

각 페이지 상단부에 상시 노출되는 네이게이션바 역할

소스 리뷰

해당 소스는 아래 빨간 영역을 구성하는 부분이다.

해당 페이지 뿐만 아니라 모든 페이지의 상단부에 존재하는데 그럴 수 있는 이유는 App.js에 있다.
해당 부분은 추후 따로 다뤄보도록 하겠다.

본 네이게이션바는 클릭 이벤트에 따라 이벤트를 줄 수도 있겠지만 이번 프로젝트의 목표는 기본적인 CRUD 기능에 있었기에 네비게이션바에 부가 기능을 추가하진 않았으므로 본 컴포넌트는 간략히 넘어가도록 하겠다.