[React] React-responsive- 반응형 실습

미리보기

breakpoint에 따라 조건부 지정

 

 

사용법

- 라이브러리 설치

npm install react-responsive
# or
yarn add react-responsive

 

 

export default function Component() {
  const matches = useMediaQuery('(min-width: 768px)')

  return (
    <div>
      {`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}
    </div>
  )
}

 

- 밑에 보이는거와 같이 interface에 여러 매개변수를 사용하지만 주로 쓰이는건 'min-width', 'max-width' 입니다.

- useMediaQuery에 값을 지정해주면 창 크기에 따라 true/false를 반환해준다.

- 그 값에 따라 조건부 랜더링(&&)을 시켜준다.

 

 

Home.tsx

const Home = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    // 창 크기 변경 이벤트 핸들러
    const handleResize = () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    };

    // 컴포넌트가 마운트될 때와 언마운트될 때 이벤트 리스너 추가 및 제거
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return (
    <>
      <p>Window Width: {windowSize.width}px</p>
      <Header />
      <Body/>
    </>
  );
};

- 정확한 수치를 확인할 수 있게 창 사이즈 크기를 띄어주었습니다.

 

 

Header.tsx

const Header = () => {
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  return (
    <>
      <Desktop>
        <div>this is Desktop</div>
      </Desktop>
      <Tablet>
        <div>this is Tablet</div>
      </Tablet>
      <Mobile>
        <div>This is Mobile</div>
      </Mobile>

      <HeaderWrapper>
        <div>
          {/* 목록 버튼 */}
          <button>List Button</button>
        </div>
        {isDesktop && <Logo>로고</Logo>}
        <Nav>
          <ul>
            {/* 메뉴 버튼들 */}
            <li>
              <a href="#">메뉴 1</a>
            </li>
            {isDesktop && (
              <>
                <li>
                  <a href="#">메뉴 2</a>
                </li>
                <li>
                  <a href="#">메뉴 3</a>
                </li>
              </>
            )}
          </ul>
        </Nav>
      </HeaderWrapper>
    </>
  );
};

- desktop사이즈일 때만, 로고 이미지가 보이도록하고,

메뉴 nav바도 모두 보이도록 하였습니다.

 

 

Body

const Body = () => {
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  return (
    <Container>
      <Content>
        {/* 내용을 이곳에 추가 */}
        <h1>내용을 가운데 정렬합니다.</h1>
        <p>기타 내용이 들어갑니다.</p>
      </Content>
      {isDesktop && (
        <Content>
          {/* 내용을 이곳에 추가 */}
          <h1>내용을 가운데 정렬합니다.</h1>
          <p>기타 내용이 들어갑니다.</p>
        </Content>
      )}
    </Container>
  );
};

- 마찬가지로 desktop이면 본론의 모든 내용이 보이도록 하였습니다.

 

 

 

참고

https://usehooks-ts.com/react-hook/use-media-query

useMediaQuery