React 토글

어떠한 사이트든 사이드 메뉴, 혹은 내비게이션 바 부분을 토글식으로 구현해 놓은 곳은 많을 것이다. 그래서 아래처럼 상태 값을 관리해주는 useState를 이용해서 토글 메뉴를 구현해볼 것이다! 사진처럼 오른쪽 화살표 메뉴 버튼을 누르면 없던 메뉴바가 나오게 만들면 되는 것이다. 우선 해줘야 할 것은 토글할 메뉴 리스트의 상태를 관리하기 위해 useState를 사용해주는 것이다. 편의상 불필요한 css는 지웠다. 상태에 따라 아래의 두 css가 바뀌는 게 포인트다! display: "block" display: "none" 그러고 나서 버튼이 눌리지 않은 상태면 arrow_down를, 눌린 상태면 arrow_up 이미지로 조건을 걸어준다. import React, { useState } from "rea..
박브레드
'React 토글' 태그의 글 목록