React - 전체화면 전환, F11, React Fullscreen

회사에서 기획 업무를 하는 친구한테 연락이 왔다.
"리액트 창을 켰을 때 F11을 누른 것처럼 할 수 있니?"

이 말을 듣고 나도 궁금해져서 구글에 검색을 해봤다.

검색 결과, 웹을 실행했을 때 바로 전체화면으로 전환하는 게 가능한 것인지는 잘 모르겠지만, 버튼을 눌러서 전환하는 방식들은 많이 보였다. (다행히 친구가 이 방식도 괜찮다고 함)

내가 찾아 본 방식(이 방식 말고도 여러 가지 방식이 있다)은 React Fullscreen을 활용하는 것이다.

https://www.npmjs.com/package/react-full-screen

위 사이트에서 따라 패키지를 설치해준다.

npm i react-full-screen

react 프로젝트를 생성해서 기능만 테스트해보았다.

App.js

import { FullScreen, useFullScreenHandle } from "react-full-screen";

function App() {
  const handle = useFullScreenHandle();

  return (
    <div>
      <FullScreen className="full-screen" handle={handle}>
        <button onClick={handle.enter}>전체화면 전환</button>
        <button onClick={handle.exit}>전체화면 해제</button>
        <h1>전체화면 테스트</h1>
      </FullScreen>
    </div>
  );
}

기본 화면

전체화면 전환 상태