React Hook 을 사용한 반응형 네비게이션 구현

소개

이 프로젝트에서는 현재 창 크기를 가져와 웹 애플리케이션에서 조건부로 탐색 바를 렌더링하기 위해 useWindowSize라는 사용자 정의 React Hook 을 만드는 방법을 배우게 됩니다.

👀 미리보기

🎯 작업

이 프로젝트에서 다음을 배우게 됩니다:

• 현재 창 크기를 가져오기 위해 useWindowSize 사용자 정의 Hook 구현
• 창 너비를 기반으로 탐색 바를 업데이트하기 위해 App 컴포넌트에서 useWindowSize Hook 사용

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• 재사용 가능한 기능을 캡슐화하기 위해 사용자 정의 React Hook 생성
• 상태 및 사이드 이펙트를 관리하기 위해 useState 및 useEffect 훅 활용
• 현재 창 크기를 기반으로 컴포넌트를 조건부로 렌더링

useWindowSize Hook 구현

시작하려면 편집기를 엽니다. 편집기에서 다음 파일을 볼 수 있습니다.

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

이 단계에서는 현재 창 크기를 가져오기 위해 useWindowSize 사용자 정의 Hook 을 구현하는 방법을 배우게 됩니다.

1. src/Hooks 디렉토리에 있는 useWindowSize.js 파일을 엽니다.
2. 이 파일에서 필요한 종속성을 가져옵니다.

import { useEffect, useState } from "react";

3. useWindowSize 함수를 정의합니다.

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

설명:

• useWindowSize 함수는 현재 창 너비와 높이를 포함하는 객체를 반환합니다.
• useState 훅은 windowSize 상태 변수와 이를 업데이트하는 함수 setWindowSize를 생성하는 데 사용됩니다.
• 창 크기가 조정될 때 windowSize 상태를 업데이트하기 위해 changeWindowSize 함수가 정의됩니다.
• useEffect 훅은 resize 이벤트에 대한 이벤트 리스너를 추가하고 컴포넌트가 언마운트될 때 이를 제거하는 데 사용됩니다.
• windowSize 객체는 useWindowSize 함수에서 반환됩니다.

애플리케이션 테스트

1. useWindowSize.js 파일을 저장합니다.
2. 터미널에서 npm install 명령을 사용하여 종속성을 다운로드하고, 종속성 다운로드가 완료될 때까지 기다린 다음 npm start 명령을 사용하여 프로젝트를 시작합니다.
3. 프로젝트가 성공적으로 시작되면 "Web 8080"을 클릭하여 브라우저에서 미리 봅니다.
4. 효과는 사용자가 창 크기를 조정할 때 하단 콘텐츠에 창 너비가 표시되고, 상단 탐색 바는 작은 화면에서는 두 개의 하위 메뉴를 숨기고 큰 화면에서는 세 개의 메뉴를 표시하는 것입니다.

축하합니다! useWindowSize Hook 을 성공적으로 구현하고 App 컴포넌트에서 사용하여 창 크기에 따라 탐색 바를 업데이트했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.