[개발 일기] Feeding Plants 만들기 #2

안녕하세요 건브로입니다.

이번에는 로그인 유무에 따른 네비게이션의 변화를 줘봤어요!

그리고 최종적으로 빌드까지 했습니다.😊

빌드를 한 이유는 아무래도 프론트 엔드는 UI/UX가 중요하니까 빌드를 해놓고,

동기들에게 확인받으면서 하려고 해 봤어요. 

---

1. 네비게이션의 Link 기능을 어떻게 넣어야 할 것인가?

원래는 아래의 코드처럼 하려고 했다.

하지만 이렇게 하면 Navigation Ui가 예쁘지 않아서

Material Ui에서 Bottom Navigation을 참고했다.

https://material-ui.com/

Material-UI: A popular React UI framework

<ul>
    <li>
    	<Link to="/">홈</Link>
    </li>
    <li>
    	<Link to="/auth">로그인</Link>
    </li>
    <li>
    	<Link to="/profile">프로필</Link>
    </li>
</ul>

        <BottomNavigation
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
          showLabels
          className={classes.root}>
          <BottomNavigationAction
            label="My Calendar"
            icon={<CalendarTodayIcon />}
            onClick={handleClick}
          />
          <BottomNavigationAction
            label="Add Calendar"
            icon={<AddIcon />}
            onClick={handleClick}
          />
          <BottomNavigationAction
            label="Setting"
            icon={<SettingsIcon />}
            onClick={handleClick}
          />
        </BottomNavigation>

 

이렇게 material ui를 사용하면 위의 코드랑은 좀 다르지만 밑에 사진처럼

예쁘게 Bottom Navigation이 나온다.

 

Bottom Navigation

하지만 여기서 문제가 있다... Link 태그를 만들어서 a태그처럼 사용했었는데,

Material Ui의 Bottom Navigation은 버튼을 눌렀을 때 어떻게 이동할지 몰랐었다.

 

그래서 콘솔에 계속 찍어내면서 생각해본 결과 useEffect와 useState를 사용하면 되지 않을까 생각했다.

useEffect는 componentDidComponent와 componentDidUpdate 그리고 componentWillUnmount 역할을 한다.

 

그러면 내가 버튼을 누를 때마다 useState의 value 값이 setValue에 의해 값이 바뀐다. 

그리고 값이 바뀔 때 useEffect도 감지하여 if문을 써서 해당 값일 때 화면을 넘기는 방법으로 했다.

 

아래의 코드를 확인해보면 이해될 것이다.

 

import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import AddIcon from "@material-ui/icons/Add";
import SettingsIcon from "@material-ui/icons/Settings";
import HomeIcon from '@material-ui/icons/Home';
import PermIdentityIcon from '@material-ui/icons/PermIdentity';
const useStyles = makeStyles({
  root: {
    width: "100%",
    bottom: 0,
    left: 0,
    position: "fixed",
    background: "white",
    zIndex: 100,
  },
});

const Navigation = (props) => {
  const classes = useStyles();
  const history = useHistory();
  const [value, setValue] = useState(0);
  const { isLogin } = props;

  const handleClickInMember = () => {
    if (value === 0) {
      console.log("첫번째");
      history.push("/");
    } else if (value === 1) {
      console.log("두번째");
      history.push('/adding-plants');
    } else if (value === 2) {
      console.log("세번째");
      history.push('/profile');
      
    }
  };
  const handleClickInNomember = () => {
    if (value === 0) {
      console.log("첫번째");
      history.push("/");
    } else if (value === 1) {
      console.log("두번째");
      history.push('/profile');
    }
  }
  useEffect(()=>{
    if(isLogin){
      handleClickInMember();
    }else{
      handleClickInNomember();
    }
    
  },[value])
  return (
    <nav>
      {isLogin ? (
        <BottomNavigation
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
          showLabels
          className={classes.root}
        >
          <BottomNavigationAction
            label="Home"
            icon={<HomeIcon/>}
          />
          <BottomNavigationAction
            label="Add Plants"
            icon={<AddIcon />}
          />
          <BottomNavigationAction
            label="Profile"
            icon={<PermIdentityIcon />}
          />
        </BottomNavigation>
      ) : (
        <BottomNavigation
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
          showLabels
          className={classes.root}
        >
          <BottomNavigationAction
            label="Home"
            icon={<HomeIcon/>}
          />
          <BottomNavigationAction
            label="Profile"
            icon={<PermIdentityIcon />}
          />
        </BottomNavigation>
      )}
    </nav>
  );
};
export default Navigation;

 

사실 나는 useState는 많이 써봤는데, useEffect는 이번에 생각해서 사용하는 거는 처음이었다.

계속 만들어보면서 useEffect를 더욱 효과적으로 써보자!

 

2. 빌드해서 깃허브 페이지 사용하기(경로 설정 잘해놓기)

1) yarn add gh-pages --dev 사용하기

2) "homepage" : "https://(사용자닉네임).github.io/(레파지토리 이름)/"를 package.json에 추가하기

3) package.json scripts부분에 추가하기

"scripts": {

    "predeploy": "npm run build",

    "deploy": "gh-pages -d build"

  },

4) yarn run deploy 명령어 사용하기

yarn run deploy 사용하면 먼저 predeploy를 먼저 실행한다.

pre가 있으면 먼저 실행하는 것 같다.

5) 끝!

 

오늘의 결과

 

 

오늘은 여기까지!