React / useRef로 checkbox trigger 하기

포트폴리오 제작중이다. 디자인도 직접했다 .. 옷도 잘 못입는데 디자인은 더어렵다..

지금은 로그인/로그아웃 기능을 만들고 있는데 망할 리덕스사가가 동작을 안한다 ㅠㅠ

빨리 취업하고싶다..ㅠㅠ 늦은 나이 무슨 부귀영화를 누리겠다고 직업을 바꾸려할까..

 

무튼 aisde 의 gnb에서 메뉴를 누르면 해당 섹션으로 스크롤값이 변하며 이동하려 한다.

useRef 훅 쓰는법도 간단했다. 하지만 나에게 온시련은 gnb메뉴를 클릭하여 해당 섹션으로 가고 aside도 잘 닫히는데 

저 햄버거놈이 가만히 있는것이다.. 그래서 생각한게 저걸 트리거해보자! 

 

트리거란 저 햄버거놈을 클릭하지 않았지만 클릭한 효과를 주는것이다.

사이드바가 움직이는 원리는 css클래스를 하나 만들어 줬다뺐다 하는것이다.

제이쿼리에서는 addClass,removeClass로 구현하겠지만 이건 jsx라서 저렇게 삼항연산자를 넣어주면된다.

햄버거클릭 > useState에서 true,false 값변화로 css를 줬다뺐다 할 수 있다.

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);
    }

    const handleAsideGnb = () => {
        setShowAside(showAside => !showAside);
        hamburgerBtn.current.checked = false;
    }


  return (
      <>
        <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>
        <div id="aside" className={showAside ? "asideOn" : null}>
            <div className="inner">
                <div className="top">
                    <div className="aside-logo"><img src="/images/logo.png" alt=""/></div>
                    <Link to="/login">로그인</Link>
                    <Link to="/register">회원가입</Link>
                </div>
                <ul className="asideMenu">
                    <li><a href="#Home" data-menuanchor="Home" className="asideMenuItem" onClick={handleAsideGnb} >Home</a></li>
                    <li><a href="#Lineup" data-menuanchor="Lineup" className="asideMenuItem" onClick={handleAsideGnb} >Line Up</a></li>
                    <li><a href="#Kakao" data-menuanchor="Kakao" className="asideMenuItem" onClick={handleAsideGnb} >Kakao Event</a></li>
                    <li><a href="#Instagram" data-menuanchor="Instagram" className="asideMenuItem" onClick={handleAsideGnb} >Instagram Event</a></li>
                    <li><a href="#Coupon" data-menuanchor="Coupon" className="asideMenuItem"onClick={handleAsideGnb} >Coupon Download</a></li>
                </ul>
            </div>
        </div>
      </>
  )
}

처음엔 current 뒤에 click을 주었다. 그랬더니 이벤트가 두번씩발생하면 이슈가 생겼다.

아래와 같이 checked를 false로 해주면 된다.

hamburgerBtn.current.checked = false;

아직 자바스크립트도 잘못하는 마당에 저 커런트위에 어떤것들이 오는지를 잘몰라 검색하는데 꾀나 오래걸렸다.

검색할땐 보통 전체선택 개별선택같은 트리거 예제가 많았다.

이 다음 포트폴리오는 쇼핑몰을 리뉴얼 해보려 한다. 그땐 전체선택 기능을 구현하지 않을까 싶다.