프로젝트 의 React 스킬 트리

사용자 정의 React Hook 을 사용한 반응형 네비게이션

중급

이 프로젝트에서는 useWindowSize 라는 사용자 정의 React Hook 을 생성하여 현재 창 크기를 얻고, 이를 사용하여 웹 애플리케이션에서 네비게이션 바를 조건부로 렌더링하는 방법을 배우게 됩니다.

reactjavascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

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

👀 미리보기

project preview

🎯 작업

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

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

🏆 성과

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

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

강사

labby
Labby
Labby is the LabEx teacher.