React / useState Hook으로 toggle 하기

햄버거 메뉴의 aside를 구현하기 위해 토글기능이 필요했다.

리엑트의 useState 훅을 사용하면 쉽게 구현할 수 있다.

 

1. useState를 import 해준다. 

2. useState를 선언해준다. 

3. click 이벤트에 넣어준다.

 

useState초기 상태값은 false로 해준다 아직 클릭이 안되었기 때문이다.

import React, { useState,useRef } from 'react';
import { Link } from 'react-router-dom';

export default function Aside() {
    const [showAside, setShowAside] = useState(false);
    const hamburgerBtn = useRef(null);
    const handleAside = () => {
        setShowAside(showAside => !showAside);
    }

체크박스로 햄버거 메뉴를 구현하였다. 

useRef,ref는 다음에 트리거기능 때문에 넣었다.

토글만할꺼면 빼도된다. 트리거는 다음 포스팅에 ㅎㅎ

처음에 클릭이벤트를 라벨에 주었더니 두번 이벤트가 발생한 이슈를 만났다.

이벤트는 인풋에 넣어주자.

<label htmlFor="hamburger-menu" id="hamburger-menu-wrapper" >
    <input type="checkbox" id="hamburger-menu" onClick={handleAside} ref={hamburgerBtn}/>
  <span></span>
  <span></span>
  <span></span>
</label>

GIF 올릴려고 앱스토어에서 방금 gifski를 다운받았다 ㅎㅎ 무료다.