-
React / useRef로 checkbox trigger 하기Web dev/React 2022. 3. 2. 11:18728x90반응형
포트폴리오 제작중이다. 디자인도 직접했다 .. 옷도 잘 못입는데 디자인은 더어렵다..
지금은 로그인/로그아웃 기능을 만들고 있는데 망할 리덕스사가가 동작을 안한다 ㅠㅠ
빨리 취업하고싶다..ㅠㅠ 늦은 나이 무슨 부귀영화를 누리겠다고 직업을 바꾸려할까..무튼 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;
아직 자바스크립트도 잘못하는 마당에 저 커런트위에 어떤것들이 오는지를 잘몰라 검색하는데 꾀나 오래걸렸다.
검색할땐 보통 전체선택 개별선택같은 트리거 예제가 많았다.
이 다음 포트폴리오는 쇼핑몰을 리뉴얼 해보려 한다. 그땐 전체선택 기능을 구현하지 않을까 싶다.
728x90반응형'Web dev > React' 카테고리의 다른 글
React axios swiper 데이터뿌리기 (0) 2022.03.16 React / react , express 연결하기 (0) 2022.03.15 React / 1개의 className에 class 2개 적용하기 (0) 2022.03.08 React / react-router-dom v5 와 v6 라우팅 설정 (0) 2022.03.03 React / useState Hook으로 toggle 하기 (0) 2022.03.02