일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 비동기 테스트
- nest.js forwardRef
- ScrollView 무한 스크롤
- react testing library 비동기 테스트 사용법
- react jest
- React Testing Library
- nest.js circular Dependency
- javascript 테스트
- JavaScript
- TDD방식으로 리액트 테스팅
- CSS
- 리액트 테스트 코드
- 첫 코딩
- mock api를 이용한 react 테스트
- nest.js 순환 종속성
- TodoList 테스트 코드
- HTML
- nest.js 순환 참조
- react native 무한스크롤
- React 테스트코드
- 첫코딩
- FlatList 무한 스크롤
- 프로젝트 배포하기
- 리액트 테스트
- 개발
- jest
- Testing-library/react
- react 테스트
- react
- mock api 사용법
Archives
- Today
- Total
성장을 위한 기록
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일 때만 렌더링 하는 컴포넌트를 지정하는데 사용했다.
'FE (Front End) (구) > React' 카테고리의 다른 글
React(리액트) React-Query 쿼리 useMutation 사용해보기, invalidateQueries( (0) | 2022.06.28 |
---|---|
React, React-query 리액트 쿼리 useQuery 사용하여 get 받아오기 기초 사용 방법 (0) | 2022.06.25 |
React 새로고침 선택적 막기 react-beforeunload (0) | 2022.06.15 |
React에서 Link 사용하여 데이터 전송하기 ! (0) | 2022.06.14 |
React(리액트)에서 textarea 줄바꿈 표현하는 방법, splice/ map (0) | 2022.06.10 |