[ React Hook ] 8. useFullscreen

# useFullscreen의 기능

 

import {useRef} from "react";

export const useFullscreen = (callback) => {
    const element = useRef();
    const runCd = (isFull) => {
        if (callback && typeof callback === "function") {
            callback(isFull);
        }
    };
    const triggerFull = () => {
        const El_Curt = element.current;
        if (El_Curt) {
            if (El_Curt.requestFullscreen) {
                El_Curt.requestFullscreen();
            } else if (El_Curt.MozRequestFullscreen) {
                El_Curt.MozRequestFullscreen();
            } else if (El_Curt.webkitRequestFullscreen) {
                El_Curt.webkitRequestFullscreen();
            } else if (El_Curt.msRequestFullscreen) {
                El_Curt.msRequestFullscreen();
            }
            runCd(true);
        }
    };
    const exitFull = () => {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.MozCancelFullscreen) {
            document.MozCancelFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        runCd(false);
    };
    return { element, triggerFull, exitFull };
};

useFullscreen은 등록한 이미지를 전체화면모드로 전환할 수 있도록 이벤트를 추가해주는 hook이다.

 

반환값은 { element, triggerFull, exitFull }를 반환한다.

 

triggerFull은 전체화면 이벤트를 추가해주는 함수이고

 

exitFull는 전체화면이벤트를 취소해주는 기능을 가진 함수이다.

 

element는 useFullscreen을 사용할 컴포넌트요소에 ref 속성으로 접근하기 위한 값이다.(useRef를 사용한 이유)

 

 

# 설명

 

const element = useRef();

element라는 변수는 컴포넌트에 ref속성으로 접근하기 위해서 useRef를 사용하여 반환값으로 둔다.

 

 

const runCd = (isFull) => {
    if (callback && typeof callback === "function") {
        callback(isFull);
    }
};

 

useFullscreen의 매개변수가 true(존재하고)이고 코드의 타입이 함수인경우,

 

useFullscreen의 매개변수로 들어간 함수(callback)의 매개변수가 runCd의 매게변수로 전달된다는 뜻이다.

 

------------------------------------------------------------------

< 간단한 예시 >

 

const Hi = (event) => { console.log( event ? "Hi" : "I can't say Hi" ) };

 

... useFullscreen(Hi);

 

runCd(true);

 

결과로는 runCd의 매개변수는 true이므로  useFullscreen의 매개변수로 들어간 Hi함수의 매개변수

event는 트루값을 전달받게 되므로 콘솔로그는 "HI" 가 반환된다.

-----------------------------------------------------------------

 

 

const triggerFull = () => {
    const El_Curt = element.current;
    if (El_Curt) {
        if (El_Curt.requestFullscreen) {
            El_Curt.requestFullscreen();
        } else if (El_Curt.MozRequestFullscreen) {
            El_Curt.MozRequestFullscreen();
        } else if (El_Curt.webkitRequestFullscreen) {
            El_Curt.webkitRequestFullscreen();
        } else if (El_Curt.msRequestFullscreen) {
            El_Curt.msRequestFullscreen();
        }
        runCd(true);
    }
};

triggerFull함수는 useRef를 사용해서 current리터럴이 포함되어있는 겨우에 풀스크린 이벤트를 추가해주는 함수이다.

 

El_curt는 ( element.current )를 반복하기 싫기 때문에 변수로 만들어 준 이후 사용한다.

 

else if 를 이용하여 비슷하지만 다른 이벤트를 추가해준 이유는 웹브라우저마다 반응하는 이벤트이름이 다르기 때문이다.

 

Firefox = moz

Opera = webkit

Microsoft (Edge)  =  ms

 

위와 같이 웹브라우저 마다 다를 경우를 대비하여, 추가적으로 조건문을 사용하여 이벤트명을 다양하게 입력해준다.

 

 

const exitFull = () => {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.MozCancelFullscreen) {
        document.MozCancelFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    runCd(false);
};

exitFull함수는 triggerFull함수와 반대로 천제화면을 해제하는 이벤트이다.

 

triggerFull함수와 동일하게 웹브라우저마다 적용될 수 있도록 웹사이트에 맞는 각각의 추가적으로 조건문을 만들어준다.

 

 

# 사용예시

 

const onFullS = (isFull) => {
  console.log(isFull ? "We are Full" : "We are Small");
};

const { element, triggerFull, exitFull } = useFullscreen(onFullS);

<div className="App" style={{ height: "1000vh" }}>
    <div ref={element}>
        <img
            src="https://p4.wallpaperbetter.com/wallpaper/817/916/889/falcon-9-rocket-4k-high-definition-wallpaper-preview.jpg"
            alt="Picture"
        />
        <button onClick={exitFull}>Exit fullscreen</button>
    </div>
    <button onClick={triggerFull}>Make fullscreen</button>
</div>

onFulls는 전체화면이 활성화, 비활성화되었을 때  runCd를 통해서 매개변수에 true와 false를 전달받기때문에

 

onFulls의 매개변수isFull을 넣어서 조건문을 만들어준다.

 

구조분해할당을 사용하여서 useFullscreen의 반환값인 element, triggerFull, exitFull을 가져와서 컴포넌트에 넣어준다.

 

전체화면 이벤트를 실행시킬 컴포넌트요소 속성에 ref={element} 를 넣어서 이벤트를 실행할 수 있는 상태로 만들어준다.

 

이후 버튼에 각각 exitFull함수와 triggerFull함수를 넣어줘서 활성화, 비활성화 할 수 있는 버튼을 만들어준다.

( exitFull버튼은 ref-{elemet} 요소 안에 자식요소로 존재함으로 전체화면 상태일때도 img요소 밑에 존재한다. )