# 기능소개 1) 대메뉴 클릭시 소메뉴가 보이게 하기(대메뉴는 토글기능) 2) 대메뉴에서 현재 메뉴가 아닌 다른 대메뉴를 클릭할 경우 현재메뉴는 닫히게 하기 3) 윈도우 창이 1024이하로 갈경우 모바일 메뉴로 변경 4) 모바일 메뉴 Open 클릭시 사이드바가 보이면서 백그라운드 어둡게 변경 5) 어두운 백그라운드 클릭시 사이드바가 닫히게 하기 😉최종코드는 하단에 첨부 1. 메뉴 토글 기능을 위해서 useState이용하여 open 변수 제어 setOpen(!open); 간단하게 온클릭시 보통 이렇게 많이 한다. 하지만 이렇게만 하면 내가 클릭하지 않은 다른 대메뉴도 모두 열리는 재밌는일(?)이 일어난다. 이럴때 가장 쉽게 처리 할 수 있는 방법은 바로 index를 부여하여 제어하는 것이다. 1> inde..
1. npx create-react-app . --template typescript 2. npm install react-router-dom @types/react-router-dom ★타입스크립트 사용시 @types/moduleName 을 추가로 설치 해야한다. 3. index.js BrowserRouter로 app 감싸기 - BrowserRouter: History 객체를 생성하고, 초기 위치를 상태로 만들고, URL을 참조한다. 4. 라우트를 사용할 부분에 import { Routes, Route } from "react-router-dom"; 1) Routes : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만을 렌더링 시켜주는 역할 - Route Config라는 경로 객체 트리를..
import _ from 'lodash'; //https://lodash.com/ //https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-lodash-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90 export const getHashPage = (hash: string, pages: string[], def: string): string => { let page = def; if (hash && hash.length > 0) { let check = hash.substr(1); if (_.indexOf(pages, check) != -1) { page = check; } } return page; } export default class..
