- Today
- Total
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- nextjs
- graphql
- API
- javascript
- Redux
- 코인
- 항해99
- error
- Firebase
- 차트만들기
- chart
- typescript
- 코인차트
- apollo
- rtk
- 채팅
- 차트
- 주식차트
- react
- nestjs
- Flutter
- 리액트
- 에러
- 3주차
- 비전공자
- Coin
- typeorm
- 차트구현
- 주식
- websocket
Act99 기술블로그
[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
'개발팁저장소 > react' 카테고리의 다른 글
[React] 주식사이트 만들기-3 코인API 로 표 만들기 (with React table) (0) | 2021.12.06 |
---|---|
[React] 주식사이트 만들기-2 코인API 가져오기 (with Redux toolkit) (0) | 2021.12.06 |
[React] 직접 주가 캔들 차트 만들기 - 코드정리2 (0) | 2021.12.02 |
[React] 직접 주가 캔들 차트 만들기 - 코드정리1 (SVG 연습용), (차트라이브러리 x) (0) | 2021.12.02 |
[React] 직접 주가 캔들 차트 만들기6 - 볼린저 밴드 만들기 (SVG 연습용), (차트라이브러리 x) (0) | 2021.12.01 |