Typescript 기반 리액트 반응형 웹을 개발하시는 개발자분들께 유용한 훅을 제공해 드리려 합니다.

useRelativeFontSize 훅은 제가 개발한 훅이며 이 훅은 뷰포트의 사이즈에 비례하여 폰트 사이즈를 동적으로 반환합니다. 따라서 이번 글은 훅 코드 해석과 사용법에 대해 알려드리려 합니다.

1. Hook 코드 설명

// useRelativeFontSize.ts
import { useState, useEffect } from "react";
 
export const useRelativeFontSize = (
  baseSize: number,
  baseWidth: number = 1920,
) => {
  const [fontSize, setFontSize] = useState(baseSize);
 
  useEffect(() => {
    const updateFontSize = () => {
      const currentWidth = window.innerWidth;
      const newFontSize = (currentWidth / baseWidth) * baseSize;
      setFontSize(newFontSize / 16); // rem
    };
 
    updateFontSize();
    window.addEventListener("resize", updateFontSize);
 
    return () => {
      window.removeEventListener("resize", updateFontSize);
    };
  }, [baseSize, baseWidth]);
 
  return fontSize;
};

훅의 중요한 점만 짚어보겠습니다.

인자 값은 1920px 너비 기준으로 원하는 사이즈를 픽셀 단위로 받습니다. (예: 48px = 48) baseWidth 인자 값은 기준을 잡기 위한 값입니다.
updateFontSize 함수의 역할은 현재 뷰포트의 너비가 기준 너비의 몇 배인지 구하고 입력받은 폰트 사이즈를 곱해 현재 뷰포트에 적합한 사이즈를 구합니다. 그리고 fontSize 상태값을 rem 단위로 변환하기 위해 16을 나눠서 할당합니다.
updateFontSize 함수를 호출하고 이벤트 리스너를 삽입해서 뷰포트가 리사이징 될 때마다 지속적으로 폰트 사이즈를 반환합니다.
메모리 누수를 방지하기 위해 컴포넌트가 언마운트 될 때 이벤트 리스너를 삭제합니다.

훅은 이렇게 작동하며 이 훅으로 인해 폰트가 동적으로 반환되면서 사이즈도 같이 바뀝니다.

2. 사용법

// Home.tsx
import React from "react";
import { useRelativeFontSize } from "hooks/useRelativeFontSize";
import { Text } from "styles/styled";
 
const Home: React.FC = () => {
	const fontSize = useRelativeFontSize(48);
 
	return (
		<div>
			<Text rem={fontSize}>안녕하세요.</Text>
		</div>
	);
};
 
export default Home;

// styled.ts
import styled from "styled-components";
 
interface TextProps {
  rem: number;
}
 
export const Text = styled.p<TextProps>`
  font-size: ${(props) => props.rem}rem;
`;

사용법은 간단합니다. 개발 환경 내에 훅 파일을 작성해 주고, 호출만 하면 됩니다.

스타일링 방법은 개인이 추구하는 방법으로 해도 되지만, 중요한 점은 이 훅을 호출할 때 리액트 함수 컴포넌트에서만 호출할 수 있습니다. 따라서 위 예제 코드처럼 사이즈를 props로 처리하여 스타일 컴포넌트로 넘겨주는 방식이 비교적 간편합니다. 컴포넌트 화면은 첨부하지 못했지만 리액트를 어느 정도 개발하신 분들이라면 충분히 이해할 수 있을 거라 생각합니다.

3. 마치며

이 글을 쓴 이유는 제가 개발한 훅이지만 너무 편리하게 사용했기 때문에 공유 목적으로 글을 작성했습니다. 메인으로 사용하기엔 좀 애매한 훅이지만 테스트해본다는 생각으로 한 번쯤 사용하셔도 좋을 거라 생각합니다.

이상입니다.

Blog

useRelativeFontSize Hook 소개 & 코드 설명

1. Hook 코드 설명

2. 사용법

3. 마치며