[Error Handling Log] scrollTop 컴포넌트의 호출 결과가 navbar에 적용 안 됨 에러 / 박지영

### **어떤 에러인가요?**

페이지가 전환될 때 마다 스크롤이 맨 위로 오게 하는 scrollTop 컴포넌트가 호출된다,
스크롤이 상단에 있으면 navbar에서 useEffect 훅으로 이 스크롤 움직임을 감지하여
scroll이 0일 때, 아닐 때 상태값을 변경시켜 스타일링이 다르게 적용된다.

그런데 상태값이 변경되지 않고 --> 그렇기 때문에 스타일링도 고정으로 있는 에러가 있었다.

### **에러 핸들링 방법**

- scrollTop 컴포넌트가 작동하는 원리: 현재 페이지 라우팅 주소를 이전 주소와 비교하여 변경이 있다면(—> 페이지 이동이 이뤄진다면) —> 스크롤을 0으로!
- 이상적인 순서: 1. 페이지 이동 클릭 이벤트 —> 2. scrollTop 컴포넌트 작동 —> 3. navbar.jsx에서 useEffect 내 함수 `watch()` 호출 4. `ScrollY`, `navStatus` 값이 0, false로 변경
- 그러나 결과적으로 현재 이 상태: 1. 페이지 이동 클릭 이벤트 —> 2. navbar.jsx에서 useEffect 내 함수 `watch()` 가 먼저 호출되어 —> 3. `navStatus` 값이 0, false가 아니라 먼저 다른 값으로 변경되어버림.
- 해결방법: `setTimeout` 함수를 사용하여 `watch()`가 호출되는 속도를 조금 늦춰보고, 이 함수 안에서 `ScrollY` 과 `navStatus`값을 조금 늦게 감지해보았다. 그랬더니 해결 왕료!

```jsx
class ScrollTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
}
render() {
return this.props.children;
}
}

//Navbar.jsx

const [ScrollY, setScrollY] = useState(0);
const [navStatus, setNavStatus] = useState(false);

const handleFollow = () => {
setScrollY(window.pageYOffset);
if (ScrollY > 50) {
setNavStatus(true);
} else {
setNavStatus(false);
}
};

useEffect(() => {
const watch = () => {
window.addEventListener("scroll", handleFollow);
};

//watch(); <-- 기존 코드

//변경 후 코드
setTimeout(()=> {
watch();
if(ScrollY === 0){
setNavStatus(false);
}
}, 10)

return () => {
window.removeEventListener("scroll", handleFollow);
};
});

```

### **에러 핸들링을 위해 참고한 레퍼런스 링크**

없음. 그냥 코드 뚫어지게 보고 디버깅하다가 갑자기 발견함...