[React] 컨텐츠 길이 상관 없이 Footer 고정하기

컨텐츠의 길이에 상관없이 Footer 하단 고정을 손 쉽게...... 어 ?>~!

손쉽게 해보자 . . .. .

export function updateVH() {
  const actual100vh = `${window.innerHeight}px`;
  document.documentElement.style.setProperty('--100vh', actual100vh);
}

창틀을 빼고, 스크롤은 포함한 크기 window.innerHeight 를 우선 구해서
css 속성을 새로 설정한다.

setProperty()

• object.setProperty(propertyname, value, priority)
• 필수로 propertyName 을 설정. 속성명을 새로 설정하는 것
• value 와 priority 는 선택값으로, 나는 구한 innerHeight 로 새 속성값을 부여하기루 한다 ...

그래서 위에 적은 함수를 import 해와서

function useVH() {
  useLayoutEffect(() => {
    window.addEventListener('resize', updateVH);
    return () => window.removeEventListener('resize', updateVH);
  }, []);
}

컨텐츠 길이에 상관없이 footer 를 고정할 때 사용할 수 있게 custom hook 로 만들어둡니다.