[React] 버튼 클릭 시 섹션의 offsetTop 값으로 이동하지 않는 이슈

vanila javascript로 만든 포트폴리오를 react로 변환하면서 메인 페이지에 nav 버튼을 추가하였다.

 

구현 후 잘 동작하나 확인해봤더니 버튼에 해당하는 섹션의 offsetTop값이 이상한 것.....!

header를 fixed로 띄워놓는 바람에 각 섹션의 높이를 calc(100vh - header높이)만큼 준 것 때문에 이런 이슈가 생긴 듯 하다

css에서 섹션의 높이 값을 100vh로 바꿔봤더니 header 영역이 안잡히다보니 섹션의 일정 부분이 헤더에 가려지는 건 똑같았다

 

 

처음 해 본 것) 맨 처음 섹션을 header로 잡아 scroll 값을 0으로 만들어보는 것이었다.

지금은 scroll값이 0이 아닌 듯하여 해본 방안이었다.

섹션들의 레이아웃이 비슷하기 때문에 contents라는 컴포넌트를 만들어 각 섹션에 적용을 하였고 여기 공통 클래스로 myScroll을 적용하여 버튼이 활성화 될 때 myScroll 클래스에 on클래스가 붙는 형태로 스크립트 작업을 했었다. 

 

그래서 맨 첫번 째 섹션에서 myScroll 클래스를 제거한 후 header에 myScroll 클래스를 부여했는데 두번째 섹션부터 헤더높이만큼 다시 당겨져서 출력이 되었다.....(쥬르륵)

 

두 번째는 모든 섹션의 offsetTop 값에서 header 높이값만큼 빼주는 것이었다

	const pos = useRef([]);
	const btnRef = useRef(null);

	//세로위치값 갱신 함수
	const getPos = () => {
		pos.current = [];
		const secs = btnRef.current.parentElement.querySelectorAll('.myScroll');

		for (const sec of secs) {
			if (matchMedia('screen and (min-width: 1024px)').matches) {
				pos.current.push(sec.offsetTop - 80);
			} else {
				pos.current.push(sec.offsetTop - 60);
			}
		}

		setPos(pos.current);
	};

위치값 갱신해주는 함수에서 sec.offsetTop 값에서 header 높이인 80을 빼주고 1024px 미만이면 60을 빼주기로 함!

 

성공!