useMediaQuery
Introduction
이 useMediaQuery훅은 React 애플리케이션에서 미디어 쿼리를 관리하기 위한 커스텀 훅입니다. 이 훅은 주어진 미디어 쿼리에 대한 매치 결과를 상태로 관리하며, 해당 미디어 쿼리가 변경될 때마다 컴포넌트를 업데이트합니다.
Example
import React from "react";
const MyComponent = () => {
// 사용하고자 하는 미디어 쿼리를 지정합니다.
const query = "(min-width: 600px)";
// useMediaQuery 훅을 사용하여 미디어 쿼리에 대한 상태를 얻습니다.
const isWideScreen = useMediaQuery(query);
return (
<div>
{isWideScreen ? (
<p>화면이 넓어요!</p>
) : (
<p>화면이 좁아요!</p>
)}
</div>
);
};
export default MyComponent;useMediaQuery훅은 주어진 미디어 쿼리에 대한 상태를 관리합니다.초기 렌더링 시에 미디어 쿼리에 대한 초기 매치 상태를 가져와 상태로 설정합니다.
컴포넌트가 업데이트되면, 주어진 미디어 쿼리에 대한
MediaQueryList객체를 생성하고, 상태를 해당 미디어 쿼리의 현재 매치 결과로 업데이트합니다.컴포넌트가 마운트 해제되거나 미디어 쿼리가 변경되면, "change" 이벤트 핸들러를 제거하여 메모리 누수를 방지합니다.
Hook
import { useState } from "react";
import useUpdateEffect from "./useUpdateEffect";
/**
* 이 훅은 주어진 미디어 쿼리에 대한 상태를 관리하는 커스텀 훅입니다.
* @param {string} query - 사용할 미디어 쿼리, 문자열로 입력합니다.
* @returns {boolean} - 주어진 미디어 쿼리에 대한 매치 결과 (true 또는 false)를 반환합니다.
*/
export default function useMediaQuery(query: string): boolean {
const [media, setMedia] = useState<boolean>(() => {
const mediaQuery = window.matchMedia(query);
return mediaQuery.matches;
});
// 컴포넌트가 업데이트되었을 때 실행되는 useEffect
useUpdateEffect(() => {
// 주어진 미디어 쿼리에 대한 MediaQueryList 객체 생성
const mediaQuery = window.matchMedia(query);
// 미디어 쿼리 상태 변경 이벤트 핸들러
const handleMediaChage = (event: MediaQueryListEvent) => {
// 매치 결과를 상태에 반영
setMedia(event.matches);
};
// "Chnage" 이벤트 핸들러를 추가할 때는 함수 참조를 전달
mediaQuery.addEventListener("change", handleMediaChage);
// 초기 값 설정
setMedia(mediaQuery.matches);
// 컴포넌트가 언마운트되거나 미디어 쿼리 변경 시 "change" 이벤트 핸들러 제거
return () => {
// "Change" 이벤트 핸들러 제거
mediaQuery.removeEventListener("change", handleMediaChage);
};
}, [query]);
return media;
}이 훅을 사용하면 React 애플리케이션에서 동적으로 화면 크기에 따라 컴포넌트를 다르게 렌더링할 수 있습니다.
Last updated