2강 내비게이션 바(Navigation Bar) 만들기

  가장 먼저 material-ui 라이브러리를 설치합니다.

  yarn add @material-ui/core

  yarn add @material-ui/icons

  이후에 내비게이션 바의 틀을 만들 수 있습니다.

▶ ./src/components/Appshell.js

import React from 'react';

import { withStyles } from '@material-ui/core/styles';

import AppBar from '@material-ui/core/AppBar';

import Drawer from '@material-ui/core/Drawer';

import MenuItem from '@material-ui/core/MenuItem';

import IconButton from '@material-ui/core/IconButton';

import MenuIcon from '@material-ui/icons/Menu';

const styles = {

root: {

flexGrow: 1,

},

menuButton: {

marginRight: 'auto'

},

};

class AppShell extends React.Component {

constructor(props) {

super(props);

this.state = {

toggle: false

};

}

handleDrawerToggle = () => this.setState({toggle: !this.state.toggle})

render() {

const { classes } = this.props;

return (

<div className={classes.root}>

<AppBar position="static">

<IconButton className={classes.menuButton} color="inherit" onClick={this.handleDrawerToggle}>

<MenuIcon/>

</IconButton>

</AppBar>

<Drawer open={this.state.toggle}>

<MenuItem onClick={this.handleDrawerToggle}>Home</MenuItem>

</Drawer>

</div>

);

}

}

export default withStyles(styles)(AppShell);

▶ ./src/components/App.js

import React from 'react';

import AppShell from './AppShell';

class App extends React.Component {

render() {

return (

<AppShell/>

);

}

}

export default App;

※ 실행 결과 ※

1. 내비게이션 바(Close)

2. 내비게이션 바(Open)