react-responsive 학습하기2

지난 번에 이어서 발생하는 문제점을 발견하고 수정해보는 시간을 가져보겠습니다..!

---

react-responsive 실제로 사용해보기

import React from 'react';
import useMediaQuery from 'react-responsive';
import './App.css';

export default function App () {
  const isLarger = useMediaQuery ({
    query : '(min-width: 800px)'
  });
  const isSmaller = useMediaQuery ({
    query : '(max-width: 799px)'
  });
  //console.log(isLarger);
  return (
    <div>
      {isLarger && <p className='testText'>800px 이 넘었습니당.</p>}
      {isSmaller && <p>799px 이하입니다!</p>}
    </div>
  )
};

코드로 시도해보았지만 useMediaQuery를 사용한 곳에서 null 값과 undefined 값을 리턴하고 있는 것을 콘솔을 찍어서 확인하였습니다. 어느것이 문제이려나...

useMediaQuery가 초기렌더링에서 null 값을 띄울 수 있다고 되어있으나 페이지의 너비를 바꾸는 상황에서는 비동기적으로 처리를 해야함에도 불구하고 계속해서 Null , undefined 값을 리턴시키는 문제입니다.

혹시나 싶어서 컴포넌트로 바꾸어서도 진행해보았으나..

const Large = ({children}) => {
    const isLarge = useMediaQuery ({
      query : '(min-width: 800px)'
    })
    return (isLarge ? children : null)
  };

결과는 같았습니다.. 왜지 무슨 이유일까..

구글링을 하다보니 useMediaQuery 파일을 만들어서 훅으로 사용하길래 따라해보았으나 에러만 떳고 생각해보니 라이브러리를 다운을 받았는데 이런 파일을 만드는 수고가 필요할까 싶었습니다. 그래서 다시 만들었던 파일에서 훅을 가져오는 것이 아닌 라이브러리에서 훅을 가져오는 형태로 변경하였더니 갑자기(?) 잘 작동이 되었습니다.
계속해서 useMediaQuery 를 읽지 못하던 코드가 갑자기 불린 값을 잘 가져옵니다.. 원인을 모르겠지만 저의 오타가 문제가 아니었을까 감히 짚어봅니다.. 훌쩍