useMediaQuery 커스텀 훅

1. 커스텀 훅으로 따로 생성해서

// MediaQuery.tsx

import React from 'react';
import { useMediaQuery } from 'react-responsive';

interface Props {
	children: React.ReactNode;
}

export const Mobile: React.FC<Props> = ({ children }) => {
	const isMobile = useMediaQuery({
		query: '(max-width:768px)',
	});
	return <>{isMobile && children}</>;
};

export const PC: React.FC<Props> = ({ children }) => {
	const isPC = useMediaQuery({
		query: '(min-width:769px)',
	});
	return <>{isPC && children}</>;
};

2. 가져다 쓰기

import { Mobile, PC } from './utils/MediaQuery';

function App() {
    return (
      <>
        <Mobile>Mobile</Mobile>
        <PC>Computer</PC>
      </>
    );
}

export default App;