반응형 적용

요즘 개발하고 있는 서비스는 반응형으로 제작해야 한다!

desktop, tablet, mobile 크게 3가지로 구분된다.

본격적인 개발 시작 전 초기 폴더 세팅을 해야 했는데, 이때 반응형을 담당하기로 했다.

" media query를 활용해볼까?"

처음에는 모든 페이지의 스타일 파일마다 media query를 직접 입력하려고 했는데, 생각해보니 너무 비효율적이었다.

그래서 찾아본 방법은 바로

react-responsive 라이브러리 사용하기

npm i react-responsive

이렇게 설치를 하면 된다.

이렇게 src 안에 hooks 폴더를 만들고 이 안에 useMediaQueries.jsx를 만들어준다.

코드는 이렇게 구현했다.

다른 페이지에서 이를 import해서 사용할 수 있다.

예를 들어

이렇게!!
모든 페이지마다 min-width, max-width를 작성하지 않아도 되니 더 코드가 깔끔해진 것 같다 !!

return문 주석에 주의 부분은 예전 개발 log에서 작성한 부분과 동일하다! 궁금하신 분은 한번 봐보시길 ㅎㅎㅎ

-> https://velog.io/@ohchanju3/styled-component-props