[프로젝트 7- 상단바 구현하기]

정대만·2023년 3월 26일
0

js-project

목록 보기
6/7
post-thumbnail

모바일 화면에서 많이 적용되는 기술중 하나
인 상단바가 줄어들때 ! > 버튼을 밑으로 내리는 기능이다.

하드 코딩 을 하는 방법도 잇지만 .
하드 코딩시 코드의 길이 가 너무 길어지는 문제점과 간결한
코드의 작성을 위해 useustate 의 기능을 한번만 선언하는 식으로 하였다.

<div className={change.imo ? "main-right-active" : "main-right"}>

이런식으로 style을 지정하였다.

  if (window.innerWidth < 700) {
        setchange({
          imo: true,
          down: false
        })
      }
      else {

        setchange({
          imo: false,
          down: true
        })
      }

길이가 줄어들때 작동하는 로직을 만들었다.

profile
안녕하세요

0개의 댓글