리액트 아코디언 메뉴(feat.Gnb)

# 기능소개

 

1) 대메뉴 클릭시 소메뉴가 보이게 하기(대메뉴는 토글기능)

2) 대메뉴에서 현재 메뉴가 아닌 다른 대메뉴를 클릭할 경우 현재메뉴는 닫히게 하기

3) 윈도우 창이 1024이하로 갈경우 모바일 메뉴로 변경

4) 모바일 메뉴 Open 클릭시 사이드바가 보이면서 백그라운드 어둡게 변경

5) 어두운 백그라운드 클릭시 사이드바가 닫히게 하기

 

😉최종코드는 하단에 첨부

 

1. 메뉴 토글 기능을 위해서 useState이용하여 open 변수 제어 

setOpen(!open);

 

간단하게 온클릭시 보통 이렇게 많이 한다.

하지만 이렇게만 하면 내가 클릭하지 않은 다른 대메뉴도 모두 열리는 재밌는일(?)이 일어난다.

이럴때 가장 쉽게 처리 할 수 있는 방법은 바로 index를 부여하여 제어하는 것이다.

 

 

1> index를 저장하는 activeIndex 변수를 하나 만든다.

2> 메뉴를 배열로 담고 map으로 돌린후 그에 따른 인덱스값과 저장한 activeIndex 값이 같은지 다른지에 따라 판별하여 클릭시에 제어함(1)번과 2)번이 처리됨)

 

 const MENU_LIST = [
    { title: "대메뉴1", list: ["소메뉴1"] },
    { title: "대메뉴2", list: ["소메뉴1", "소메뉴2"] },
    { title: "대메뉴3", list: ["소메뉴1", "소메뉴2"] },
    { title: "대메뉴4", list: ["소메뉴1", "소메뉴2"] },
    { title: "대메뉴5", list: ["소메뉴1"] }
  ];

onClick={() => {
  setActiveIndex(idx);
  if (activeIndex !== idx) {
    setOpen(true);
  } else {
    setOpen(!open);
  }
}}
className={`${
  activeIndex === idx && open ? "on" : ""
} dropmenu`}

 

2. 윈도우창에 따른 리사이즈

 

3)번 해결을 위해 windowSize 변수를 만든 후 초기값으로 window.innerWidth을 세팅해준다.

그 후 useEffect로 windowSize가 변할때 마다 windowSize에 값을 저장한다.

 

  const hadeleResize = () => {
    setWindowSize(window.innerWidth); //값담기
    if (windowSize <= 1024) { //1024이하일때 사이드바가 안보이게 하기위해
      setSidebarOpen(false);
    }
    setOpen(false); //윈도우 리사이즈가 일어날때 소메뉴가 펼쳐있는것이 보기 싫어서 닫히게 변경
  };

useEffect(() => {
    window.addEventListener("resize", hadeleResize);
    return () => {
      window.addEventListener("resize", hadeleResize);
    };
  }, [windowSize]); //리사이즈가 일어날때 마다 값을 저장하기 위해 작성

 

반응형

3. 모바일버튼 클릭시 사이드바가 보이며 배경이 어둡게 변경

<button onClick={() => setSidebarOpen(!sidebarOpen)}>
  <span>
    {sidebarOpen ? <span>Close</span> : <span>Open</span>}
  </span>
</button>

말그대로 클릭시 사이드바를 토글기능으로 넣은것이다.

아래 열고 닫는 버튼 텍스트도 사이드바가 있으면 open이 되고 없으면 close가 되는것이다.

 

<div
    className={`${sidebarOpen ? "active" : ""} backcrop`}
    onClick={() => setSidebarOpen(false)}
></div>

백그라운드 부분도 사이드바가 있으면 active라는 class를 부여하였다.

또 백그라운드를 클릭하면 사이드바가 닫히게 하기 위해 작업하였다.

 

 

++이기능의 핵심은 메뉴를 배열로 담은 후 index값으로 제어하는 것이다.

- 추가로 작업하다가 깨달은점 Link를 쓸때 사용할 부분에 BrowserRouter로 감싸지 않으면 에러가 뜰것이다.

import { BrowserRouter } from "react-router-dom";  //작성 후

<BrowserRouter>
	<App />
</BrowserRouter>

잊지말구 react-router-dom 모듈에 있는 기능을 쓸때에는 꼭 위에 부분을 해 주어야 한다.

😊최종소스_by.Sunny