React 브라우저 전체 화면 모드

목차

 

 

🎥 Video

 

 

 

⚙️ Skill

Skill	사용 이유
React	주 사용 라이브러리
Typescript	타입 안정성
Emotion	CSS in JS

 

📛 Solution

더보기를 누르세요

정답!

 

import { useEffect, useState } from 'react'

const Component = () => {
  const [isFullScreen, setFullScreen] = useState(Boolean(document.fullscreenElement))

  const toggleFullScreen = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen()
    } else {
      document.documentElement.requestFullscreen()
    }

    setFullScreen((current) => !current)
  }

  useEffect(() => {
    const fullscreenchangeHandler = () => {
      setFullScreen(Boolean(document.fullscreenElement))
    }

    window.addEventListener('fullscreenchange', fullscreenchangeHandler)

    return () => window.removeEventListener('fullscreenchange', fullscreenchangeHandler)
  }, [])

  return (
    <button onClick={() => toggleFullScreen()}>
      {isFullScreen ? '전체화면 모드에요' : '일반 모드에요'}
    </button>
  )
}

export default Component

 

💬 Description

document API를 사용하여 브라우저 전체 모드로 변경합니다.

 

1. document.fullscreenElement

document.fullscreenElement는  전체화면 모드 일때, 전체 Element를 반환하고

전체화면 모드가 아닐 때, null 값을 반환합니다.

document.fullscreenElement

 

2. state는 단순히 어떤 상태를 바꾸고자 함입니다.

예를 들어 전체화면 모드일 때, CSS를 수정하고 싶겠죠?

const [isFullScreen, setFullScreen] = useState(Boolean(document.fullscreenElement))

 

3. toggleFullScreen 함수는 전체화면 모드 버튼을 클릭했을 때, 실행하기 위한 함수입니다.

전체화면 모드 버튼을 처음 클릭할 때는, 전체화면 모드가 아니기 때문에 2️⃣이 실행되고 동시에 3️⃣이 실행됩니다.
document.documentElement.requestFullscreen()는 전체 화면 모드를 실행하는 메서드 입니다.

3️⃣은 CSS 상태를 변경하고자 함입니다. 현재의 최신 상태를 가져와 반전 시킵니다.

 

다시 한번 전체모드 버튼을 클릭하면, 1️⃣이 실행되고, 동시에 3️⃣이 실행됩니다.

document.fullscreenElement는 전체화면 모드일 때, Element가 반환되어 해당 조건은 true 가 됩니다.

const toggleFullScreen = () => {
    if (document.fullscreenElement) {
      1️⃣ document.exitFullscreen()
    }  else {
      2️⃣ document.documentElement.requestFullscreen()
    }

    3️⃣ setFullScreen((current) => !current)
  }

 

4. useEffect 훅은 마운트 됬을 때, fullscreenchange 이벤트를 이벤트 리스너에 등록하고,
언마운트 됬을 때, 이벤트 리스너를 제거하기 위함입니다.

정확히는 전체화면 모드일 때, EscKey를 감지하지 못해서 이벤트 리스너에 등록하기 위함입니다.

  useEffect(() => {
    const fullscreenchangeHandler = () => {
      setFullScreen(Boolean(document.fullscreenElement))
    }

    window.addEventListener('fullscreenchange', fullscreenchangeHandler)

    return () => window.removeEventListener('fullscreenchange', fullscreenchangeHandler)
  }, [])

 

5. 이벤트 리스너가 fullscreenchange 이벤트가 발생하면, fullscreenchangeHandler 함수를 실행시켜줍니다.

이 코드는 EscKey(escape)키를 눌렀을 때, 전체화면 모드를 해제하기 위한 코드입니다.

    const fullscreenchangeHandler = () => {
      setFullScreen(Boolean(document.fullscreenElement))
    }

 

✏️ 정리

1. 사용자가 전체화면 모드 버튼을 클릭하면, 아래의 1-1과 1-2가 순차적으로 실행됩니다.

  1-1. document.documentElement.requestFullScreen() 메서드가 실행되며, isFullScreen의 값을 true로 상태를 반전시킵니다.

  1-2. 이벤트 리스너에 등록된 fullscreenchangeHandler 함수를 실행하고, isFullScreen의 상태를 true로 변경합니다.

2. 사용자가 EscKey를 누르거나 다시 버튼을 클릭할 수 있습니다.
3. EscKey를 누르면, 아래의 3-1과 3-2가 순차적으로 실행됩니다.

  3-1. fullscreenchange 이벤트가 감지되고 전체화면 모드가 해제됩니다.

  3-2. fullscreenchangeHandler 함수가 실행되어 isFullScreen를 false 상태로 변경합니다.

4. 사용자가 다시 버튼을 클릭하면, 4-1과 4-2, 4-3가 순차적으로 실행됩니다.
  4-1. toggleFullScreen 함수의 내부에서, document.exitFullScreen() 메서드가 실행되며 전체화면 모드가 해제됩니다.

  4-2. isFullScreen의 값을 false로 상태를 반전시킵니다. 

  4-3. fullscreenchangeHandler 함수도 실행되며, isFullScreen의 값을 false로 상태를 변경합니다.