React(리액트) 반응형 CSS 라이브러리 react-responsive

리액트 반응형에 사용하기 좋은 라이브러리 react-responsive

CSS를 통해 반응형을 구현하는 방법인

@media [타입] [사이즈 지정] {
css
}

이런 방식으로 작성 할 수 있을 것이다. 물론 이 방법으로도 모든 반응형을 구현 할 수 있지만, 이번에는 responsive라는 라이브러리를 사용해봤다.

react-responsive

이 친구의 장점이 무엇이냐?
react-responsive에서 제공하는 useMediaQuery 훅이다.

해당되는 화면 크기에 들어오면 true 값을 반환한다. 해당되지 않는다면 당연히 false를 반환한다.

사용 방법은 간단하고 다양한다. 아래 참고할 다른 분들의 블로그 링크를 확인하여 편한 방법을 사용해보자.

const isDesktopOrLaptop = useMediaQuery( { minDeviceWidth: 1224 }, { deviceWidth: 1600 }

const Tablet = ({ children }) => {
 const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 }) 
 return isTablet ? children : null }

export const Mobile = ({ children }) => {
 const isMobile = useMediaQuery({ query: "(max-width:768px)" });
  return <>{isMobile && children}</> } 

export const Pc = ({ children }) => { 
const isPc = useMediaQuery({ query: "(min-width:769px)" }); 
return <>{isPc && children}</> }

const  middleMedia = useMediaQuery({
query:  "(min-width : 1330px)",
});

간단한건 내부에 선언해서 사용할 수 있고, 각 함수로 만들어 사용할 수도 있고,
가장 유용하고 편리한 건 Hooks로 한번에 관리하는 방법인 것 같다.

내가 사용 한 곳
나는 아직 반응형에 익숙하지 않은 이제 시작한 개발자 지망생이기 때문에 보통은 styled-components에서 @media로 사용한다.
다만 가끔은 true / false 불린 값을 통해 사용하는게 더 편할 때가 있었다.

그래서 가끔씩 사용했지만, 적응된다면 이 방식이 더 편할 것 같다.
나는 주로 true일 때만 렌더링 하는 컴포넌트를 지정하는데 사용했다.

react에서 css 다양하게 활용하기
responsive vs media