React 반응형 웹 디자인(react-responsive)

프로젝트 중 데스크탑과 모바일의 2가지 버전을 768px 기준으로 분기하고 세부 컴포넌트에서 자유롭게 사용하기 위해 `react-responsive` 모듈을 사용했다.

1. redux 설정

isMobile 에 true / false 값을 저장하고 세부 컴포넌트에서 불러와 스타일을 분기하기 위해 redux 설정을 미리 해주었다.

📁 isMobile.js

import { createSlice } from "@reduxjs/toolkit";

export const isMobileSlice = createSlice({
  name: "isMobile",
  initialState: {
    isMobile: false,
  },
  reducers: {
    setIsMobile(state, action) {
      state.isMobile = action.payload;
    },
  },
});

export const { setIsMobile } = isMobileSlice.actions;
export default isMobileSlice.reducer;

📁 store.js

import { configureStore } from "@reduxjs/toolkit";
import isMobileReducer from "./isMobile";

export const store = configureStore({
  reducer: {
    isMobile: isMobileReducer,
  },
});

2. react-responsive 모듈 사용

npm install react-responsive 로 설치 가능
예를 들어, 아래 코드에서는 768px을 기준으로 보다 작으면 false, 크면 true를 반환한다.

📁 App.js

import { useMediaQuery } from "react-responsive";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setIsMobile } from "./redux/isMobile";

const dispatch = useDispatch();
// browser size에 따라 true / false 할당
const isMobile = useMediaQuery({ query: "(max-width: 768px)" });

3. redux에 isMobile state 저장

📁 App.js

useEffect(() => {
    dispatch(setIsMobile(isMobile));
  }, [isMobile, dispatch]);

4. 세부 컴포넌트에서 redux store로부터 웹/모바일 여부 불러오기

📁 모든 컴포넌트 파일 :)

import { useSelector } from "react-redux";

// 모바일 여부 true / false로 반환
const isMobile = useSelector((state) => state.isMobile.isMobile);

---