[React] 직접 주가 캔들 차트 만들기 - 네비게이션 바 만들기 navbar & tabbar

오늘은 코인차트를 만들기 앞서 라우터 정리와 네비게이션 바를 만드려고 한다.

 

먼저!! 말하자면!! 라우터와 네비게이션 바를 미리 만들어놓는 것이 좋다.

레이아웃 짜는것부터 css 와 router 설정과정까지 모든 면에서 봤을 때 페이지와 컴퍼넌트를 먼저 만드는 것보다

라우터와 네비게이션 바를 먼저 만드는게 더 효율적이라고 생각한다.

(css 설정도 다시 해줘야하고 골치 아픈게 많았다.)

 

그럼 본론부터 들어가면,

css 는 tailwind css 를 이용했다.

그리고 components 폴더에 navbar 폴더를 만들어 네비게이션 바에 필요한 모든 코드를 넣어주었다.(css까지)

네비게이션 바는 잘 건들지 않을 것 같아서 이런 선택을 했다.

 

********

네비게이션 바는 docs와 기타 코드문헌들을 많이 참조했다.

(이쁘게 만들고 싶은 욕심과 그냥 Link 형태로 만들고 만들기는 아쉬워서 그랬습니다..ㅎㅎ)

********

 

다음 네비게이션 요소를 클릭할 때마다 state를 변경시키고 css와 라우터에 적용시킬 것이기 때문에,

네비게이션 요소에 필요한 내용들을 싹 export 시켜주었다.

 

- tavArr.ts

export default ["Home", "Stock", "Coin"];

 

다음 네비게이션 hook 을 만들었다. hook 을 이용해 클릭할 때마다 상태를 변화시킬 예정이다.

 

- navHook.tsx

 

import { useState, useCallback } from "react";

const useNavigation = () => {
  const [route, setRoute] = useState("Home");

  const selectAction = useCallback(
    (option) => {
      if (route === option) return;
      setRoute(option);
    },
    [route]
  );

  return { currentRoute: route, setCurrentRoute: selectAction };
};

export default useNavigation;

 

다음은 네비게이션 바를 만들어주었다.

login 의 경우 추후 내가 admin 로그인용 사용할 예정이기 때문에 버튼 + window.location.href 형태로 만들어주었다.

 

import React from "react";
import logo from "./logo.jpg";
import classNames from "classnames";

import styles from "./css/navbar.module.css";
import { Link } from "react-router-dom";

type Props = {
  navigationData: string[];
  currentRoute: string;
  setCurrentRoute: any;
};

const Navbar = ({ navigationData, currentRoute, setCurrentRoute }: Props) => {
  const onAdminClick = () => {
    window.location.href = "/login";
  };
  return (
    <nav className={styles.navbar}>
      <img src={logo} className=" h-14" />
      <ul className={styles.navItems}>
        {navigationData.map((item, index) => (
          <li>
            <Link
              key={index}
              onClick={() => setCurrentRoute(item)}
              className={classNames([
                styles.navItem,
                currentRoute === item && styles.selectedNavItem,
              ])}
              to={item}
            >
              {item}
            </Link>
          </li>
        ))}
      </ul>
      <button className={styles.actions} onClick={onAdminClick}>
        Admin
      </button>
    </nav>
  );
};

export default Navbar;

 

여기서 중요한 점은 href 를 사용하지 말고 Link 를 사용해야하는 점.

 

다음은 라우터 차례이다.

BrowserRouter는 index.tsx에 감싸주고

라우터.tsx 파일을 만들어 만들어주었다.

라우터.tsx 에 네비게이션 훅을 가져와주었고, 네비게이션바와 탭 바를 렌더링시켜주었다.

 

 

import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "../components/navbar/navbar";
import useNavigation from "../components/navbar/navHook";
import Tabbar from "../components/navbar/tabbar";
import { Home } from "../pages/home";
import { Login } from "../pages/login";
import { Stock } from "../pages/stock/stock";
import navigationData from "../components/navbar/navArr";

export const LogoutRouter = () => {
  const { currentRoute, setCurrentRoute } = useNavigation();
  return (
    <>
      <div>
        <Navbar
          navigationData={navigationData}
          currentRoute={currentRoute}
          setCurrentRoute={setCurrentRoute}
        />
        <Tabbar
          navigationData={navigationData}
          currentRoute={currentRoute}
          setCurrentRoute={setCurrentRoute}
        />
      </div>
      <Routes>
        <Route path="/" element={<Stock />} />
        <Route path="/stock" element={<Stock />} />
        <Route path="/home" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </>
  );
};

 

css는 내가 원하는대로 작성해 준 결과

 

차트 네비게이션 완성

 

모바일버전

 

 

원하는대로 잘 만들어졌다.

 

https://github.com/act99/stock-frontend

GitHub - act99/stock-frontend: Stock Chart & Livechat on website. For education & testing