사내 디자인 시스템과 관련된 UI util함수나 hook을 만들어보고 있다.
그 중 useBreakpoint라는 거의 모든 앱에서 사용하고 있는 custom hook을 구현하 공통 라이브러리에 넣어놓고 사용하면 좋을 것 같아서 다른 hook들과 함께 넣기로 했다.
mui에서 제공하는 useMediaQuery 를 한번 더 감싸서 좀 더 빠르게 theme type을 적용하여 사용할 수 있도록 하는, hook이다. 구현 코드가 아주 간단하기 때문에 처음엔 그냥 코드만 옮겨올 생각이었지만 코드를 옮겨오던 중 새로운 사실을 알았다.
평소에는 down query만 주로 사용하기 때문에 몰랐는데, 기본적으로 사용할 수 있는 다음 다섯 가지 query중 "between" 은 사용하지 못하도록 되어있었다.
그 이유는 "between" query를 사용하는 경우 추가적으로 endBreakpoint 파라미터도 받아야하기 때문에 , 구현이 까다로워지기 때문이 아니었을까?
괜한 오기(?)가 생겨서 이 between query까지 사용할 수 있는 useBreakpoint를 만들어보기로 했다.
참고로, useMediaQuery에서 사용가능한 query는 다음과 같이 5가지이다.