드랍 다운 메뉴 만들기

프로젝트를 만들던 도중 드랍 다운 메뉴를 만들어야 하는데 많은 예제들을 참고 하다가 제일 간단한 방법을 찾은 것 같습니다.

 

저는 이렇게 코드를 작성했습니다.

import {useState} from 'react';
import {Routes, Route, Link} from 'react-router-dom';

function App() {
  let [isOpen, setIsOpen] = useState(false);

  return(
    <header>
      <nav className="tool-bar">
        <button type="button" onClick={() => {
          setIsOpen(!isOpen);
        }}>
          메뉴
        </button>
        
        <Link to="/">
          <img 
            src={process.env.PUBLIC_URL + '/public-assets/logo.png'}
            alt="logo"
            className="logo" />
        </Link>

        <button type="button">
          검색
        </button>
      </nav>
    </header>
    <aside>
      <Sidebar isOpen={isOpen} />
    </aside>
  );
}

function Sidebar(props) {
  let isOpen;

  if(!props.isOpen) {
    isOpen = 'hide-sidebar';
  } else {
    isOpen = 'hide-sidebar show';
  }

  return(
    <ol className={isOpen}>
      <li className="side-item">
        <img src="/public-assets/nav/click-home.png" alt="home icon" className="side-icon"/>
        <span className="side-title click">홈</span>
      </li>
      <li className="side-item">
        <img src="/public-assets/nav/recipe.png" alt="recipe icon" className="side-icon"/>
        <span className="side-title">레시피</span>
      </li>
      <li className="side-item">
        <img src="/public-assets/nav/main.png" alt="main icon" className="side-icon main"/>
        <span className="side-title">나눔/신청</span>
      </li>
      <li className="side-item">
        <img src="/public-assets/nav/chat.png" alt="chatting icon" className="side-icon"/>
        <span className="side-title">채팅</span>
      </li>
      <li className="gnsideb-item">
        <img src="/public-assets/nav/mypage.png" alt="mypage icon" className="side-icon"/>
        <span className="side-title">마이페이지</span>
      </li>
    </ol>
  );
}

 

 

1. 메뉴 버튼을 누르면 isOpen의 state 값을 false 또는 true로 변경해주는 함수를 만들었습니다.

<button type="button" onClick={() => {
  setIsOpen(!isOpen);
}}>
  메뉴
</button>

 

2. state를 <Slidebar> 에 isOpen으로 전달해줍니다.

<aside>
  <Sidebar isOpen={isOpen} />
</aside>

 

3. Slidebar 컴포넌트에서 isOpen이 false이면 'hide-sidebar'를 class이름으로 전달하고

true이면 'hide-sidebar show'를 클래스 이름으로 전달합니다.

function Sidebar(props) {
  let isOpen;

  if(!props.isOpen) {
    isOpen = 'hide-sidebar';
  } else {
    isOpen = 'hide-sidebar show';
  }

  return(
    <ol className={isOpen}>
    </ol>
  );
}