반응형 사이트 wheel 이벤트 적용시 헤더 높이 빼는 방법

🥹 문제 발생

랜딩 페이지 wheel 이벤트를 적용하는 과정에서 헤더의 높이를 고려하지 않고 모든 섹션의 높이를 100vh로 설정하여 스크롤 이벤트를 구현하였더니 헤더가 차지하는 공간이 무시되면서 레이아웃이 깨져버리는 문제가 발생하였다..

 

🤔 해결 시도: Zustand로 상태 관리하기

 

• Zustand를 사용하여 전역 상태로 headerHeight를 관리.
• 각 컴포넌트가 필요할 때마다 Zustand로부터 headerHeight를 가져와 사용하도록 구현.

하지만 이 방법은 아래와 같은 단점이 있었습니다.

 

1. 불필요한 로직 증가: 각 컴포넌트에서 헤더 높이를 계산하고 Zustand를 통해 다른 컴포넌트에 공유하는 과정이 복잡해졌습니다.
2. 효율성 부족: 단순히 헤더의 높이 정보를 공유하려고 전역 상태 관리 라이브러리를 사용하는 것이 과도하다고 느껴졌습니다.

 

 

👍🏻 해결 방법

컴포넌트에서 헤더에서 높이를 가져와야 한다는 생각에서 벗어나 브라우저 크기 변화에 따라 높이만 헤더와 똑같이 주면 되지 않을까?라고 생각해

const calculateHeaderHeight = () => {
  if (window.innerWidth >= 1440) {
    setHeaderHeight(80); // 데스크탑 헤더 높이
  } else {
    setHeaderHeight(56); // 모바일 헤더 높이
  }
};

브라우저 크기 변화에 따라 높이를 동적으로 계산하고 헤더 높이와 같은 값을 useState에 저장해주었습니다.

 

헤더 높이를 계산하고 관리하는 방식은 zustand 같은 전역 상태 관리 라이브러리를 사용할 필요가 없었음을 알게 되었다.

튜닝의 끝은 순정이다.

zustand가 사용하기 편하다고 모든 것에 적용하려고 하지 말자.. 

 

해결 완료 😚