【비망록】일본 제일 알기 쉬운 React-Redux 강좌 실천편 #9 「네이티브 앱풍 헤더를 만들자」

소개

개요

이 기사는 트라해크 씨( @ 토라하 ck_ )가 운영하는 Youtube 채널 『트라해크의 엔지니어 학습 세미나【토라 세미나】』의 『일본에서 알기 쉬운 React-Redux 강좌 실천편 』의 학습 비망록입니다.

지난 강좌에서는 Products의 상세 정보 페이지를 만들었습니다.

이 강좌에서는 Material-UI의 <AppBar/> 구성 요소를 사용하여 네이티브 앱 스타일 헤더를 만듭니다.

※ 마지막 기사 : htps : // 이 m / dpm tcpbr / / ms / 1b1 a cf97 a 62cd5101884

동영상 URL

네이티브 앱풍 헤더를 만들자【일본 제일 알기 쉬운 React-Redux 강좌 실천편#9】

요점

Material-UI의 <AppBar> 컴퍼넌트로, 헤더를 작성할 수 있다.

Material-UI의 <Badge> 컴퍼넌트에서, 아이콘의 어깨에 숫자를 표시할 수 있다.

완성계 이미지

http://localhost:3000


모든 페이지 상단에 헤더가 표시되며 앱 이름 로고와 각 메뉴 아이콘이 표시됩니다.

메뉴 아이콘은 여전히 ​​더미 상태이며 클릭해도 아무 일도 일어나지 않습니다. 또한 장바구니 오른쪽 어깨의 배지 수도 더미 값을 표시하고 있습니다.

메뉴 아이콘은 로그인 상태일 때만 표시하므로 로그인 화면에 표시되지 않습니다.
http://localhost:3000/signin

메인

헤더를 만들자.

이번에는 어쨌든 Material-UI를 사용하여 뷰 파일을 골고루 쓰는 것뿐입니다.

헤더는 앱의 임의의 페이지 상단에서 표시를 시키므로 App.jsx 를 부모 컴포넌트로 정의합니다.
src/components/ 바로 아래에 새롭게 Header 디렉토리를 만들고,

헤더 전체의 컴퍼넌트로서 Header.jsx

헤더 오른쪽 메뉴 아이콘 그룹을 표시하는 구성 요소로 HeaderMenu.jsx

을 만듭니다.



구현 파일 (헤더)

1.src/components/Header/Header.jsx
2.src/components/Header/HeaderMenus.jsx
3.src/components/Header/index.js
4.src/App.jsx

1.src/components/Header/Header.jsx

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from "../../assets/img/icons/logo.png";
import { useDispatch, useSelector } from 'react-redux';
import { getSignedIn } from '../../reducks/users/selectors';
import {push} from "connected-react-router"
import {HeaderMenus} from "./index"

const useStyles = makeStyles({
  root: {
    flexGrow: 1,
  },
  menuBar: {
    backgroundColor: "#fff",
    color: "#444",
  },
  toolBar: {
    margin: "0 auto",
    maxWidth: 1024,
    width: "100%"
  },
  iconButtons: {
    margin: "0 0 0 auto"
  }
})

const Header = () => {
  const classes = useStyles();
  const dispatch = useDispatch();
  const selector = useSelector((state)=>state)
  const isSignedIn = getSignedIn(selector)

  return (
    <div className={classes.root}>
      <AppBar position="fixed" className={classes.menuBar}>
        <Toolbar className={classes.toolBar}>
          <img
            src={logo} alt="Torahack Logo" width="128px"
            onClick={()=>dispatch(push("/"))}
          />
          {isSignedIn && (
            <div className={classes.iconButtons}>
              <HeaderMenus />
            </div>
          )}
        </Toolbar>
      </AppBar>
    </div>
  )
}

export default Header

<AppBar> 의 안에 <Toolbar> 를 기술하는 것으로, 헤더를 구현할 수 있습니다.

메뉴 아이콘 표시 <HeaderMenus> 요소는 로그인 상태에서만 표시하고 싶기 때문에 {isSignedIn && ... 로 조건 분기하고 있습니다.

2.src/components/Header/HeaderMenus.jsx

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Badge from "@material-ui/core/Badge";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import MenuIcon from "@material-ui/icons/Menu"

const HeaderMenu = () => {
  return (
    <>
      <IconButton>
        <Badge badgeContent={3} color="secondary">
          <ShoppingCartIcon />
        </Badge>
      </IconButton>
      <IconButton>
        <FavoriteBorderIcon />
      </IconButton>
      <IconButton>
        <MenuIcon />
      </IconButton>
    </>
  )
}

export default HeaderMenu

return 문의 내용은 하나의 HTML 요소여야 하기 때문에 <>...</> 로 전체를 둘러싸고 있습니다.

<Badge> 컴퍼넌트로 Icon 를 랩핑 하는 것으로, Icon 의 오른쪽 어깨에 수치를 표시시킬 수가 있습니다. 현재는 badgeContent={3} 로서 더미의 수치를 표시시키고 있습니다만, 최종적으로는 여기에 「카트에 넣은 상품수」가 들어갑니다.

3.src/components/Header/index.js

export {default as Header} from "./Header"
export {default as HeaderMenus} from "./HeaderMenus"

진입점에 추가합니다.

4.src/App.jsx

import React from 'react'
import Router from './Router'
import "./assets/reset.css"
import "./assets/style.css"
import {Header} from './components/Header'

const App = () => {
  return (
    <>
      <Header />
      <main className="c-main">
          <Router />
      </main>
    </>
  )
}

export default App;

App.jsx에서 Header를 로드하여 모든 페이지에 표시되도록 합니다.

동작 확인

「완성계 이미지」와 같기 때문에 할애합니다.

사이고에게

이번 요점을 밝히면,

Material-UI의 <AppBar> 컴퍼넌트로, 헤더를 작성할 수 있다.

Material-UI의 <Badge> 컴퍼넌트에서, 아이콘의 어깨에 숫자를 표시할 수 있다.

이상입니다! 다음 강좌에서 <MenuIcon /> 의 내용을 만들어 나갈 예정입니다.

이러한 학습 내용을 날마다 중얼거리고 있으므로, 좋으면 Twitter( @ddpmntcpbr )의 팔로우도 잘 부탁드립니다.