[모각코+] 웹 리액트(React) 1월달과정 10일차

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EB%A9%94%EB%89%B4-%EC%97%86%EC%95%A0%EA%B8%B0

✅ 오늘의 문제 : 메뉴 없애기 ① by Qcell | 코드메이트

✅ 오늘의 문제 : 메뉴 없애기 ①

이번 시간에는 react-icon 라이브러리를 통해 홈,탐색,구독 탭의 아이콘을 추가로 구현했고, 각각 클릭시 페이지 이동과 해당하는 페이지 탭의 회색으로 표시하는 기능까지 구현했습니다.

 

그리고 오늘의 과제는 Header 부분의 햄버거 버튼을 눌렀을 때, 메뉴가 사라지도록 기능을 구현하는 것이였습니다.

 

(스타일링은 생략하겠습니다 !)

 

Header.js

import styles from './Header.module.css';
import youtube_logo from '../../data/youtube_logo.png';
import { FiMenu } from 'react-icons/fi';
import { IoSearchOutline } from 'react-icons/io5';
import { BsGrid3X3Gap } from 'react-icons/bs';
import { HiOutlineDotsVertical } from 'react-icons/hi';


function Header({controlMenu}) {
  return (
    <div className={styles.header}>
      <div className={styles.tab}>
        <FiMenu className={styles.icon} onClick={controlMenu}/>
        <img src={youtube_logo} alt="로고" className={styles.logo} />
      </div>
      <div className={styles['center-tab']}>
        <input className={styles.input} />
        <IoSearchOutline className={styles['search-icon']} />
      </div>
      <div className={styles.tab}>
        <BsGrid3X3Gap className={styles.icon} />
        <HiOutlineDotsVertical className={styles.icon} />
      </div>
    </div>
  );
}


export default Header;

 

 

먼저 Header에서 props 매개변수로 controlMenu를 추가해주고, Fimenu에 onClick 속성에 controlMenu를 추가했습니다.

그 뒤 Layout.js파일로 이동합니다.

 

Layout.js

import styles from './Layout.module.css';
import Header from './Header';
import Menu from './Menu';
import { useState } from 'react';


function Layout({ children, activeMenu }) {


    const [menuState, setMenu] = useState(true);
    function controlMenu(){
        setMenu(menuState=>!menuState);
    }
    return (
      <div className={styles.container}>
        <Header controlMenu={controlMenu}/>
        <div className={styles.layout}>
            {
                menuState
                ?<Menu activeMenu={activeMenu} /> :null
            }
          <div className={styles.contents}>{children}</div>
        </div>
      </div>
    );
  }
  
  export default Layout;

 

Layout.js에서는 useState를 통해 메뉴를 제어하는 setMenu 메소드와 메뉴를 제어하는 Key값인 menuState를 추가해줍니다.

그 뒤 controlMenu함수를 생성하여 클릭 시에 menuState값이 초기 true에서 false로 변화하도록 설정합니다.

그 뒤 메뉴부분에 삼항연산자를 사용하여 menuState가 true면 메뉴를 보이게하고, false면 null로 설정합니다.

 

Menu.js

import { Link } from 'react-router-dom';
import styles from './Menu.module.css';
import {TiHome} from 'react-icons/ti';
import { FaRegCompass } from 'react-icons/fa';
import { MdSubscriptions } from 'react-icons/md';


function Menu({ activeMenu }) {
  return (
    <div className={styles.menu}>
      <Link
        to="/"
        className={activeMenu === 'home' ? styles.focused : styles.link}
      >
        <TiHome className={styles.icon} />홈
      </Link>
      <Link
        to="/explore"
        className={activeMenu === 'explore' ? styles.focused : styles.link}
      >
        <FaRegCompass className={styles.icon} />
        탐색
      </Link>
      <Link
        to="/subscription"
        className={activeMenu === 'subscription' ? styles.focused : styles.link}
      >
        <MdSubscriptions className={styles.icon} />
        구독
      </Link>
    </div>
  );
}


export default Menu;

Menu.js도 삼항연산자를 사용하여 해당하는 탭을 회색으로 표시하는 기능을 구현해 둔 상태입니다 !

 

실행 결과