react는 기본적으로 js문법을 존중한다. 따라서 js를 최대한 활용해주도록 하자.
js의 addEventListener를 사용할 것이다.
useEffect를 통해 window.scroll의 이벤트를 감지하는 방법
useEffect는 component의 렌더를 감지하고 렌더가 다 진행되고 나서 이벤트를 시작시킨다. 두 번째 인자로 조건을 걸어주지 않으면 매 렌더시마다 콜백 함수를 실행시켜준다.
이 useEffect에 대해 eventListener를 걸어주도록 하자. scroll의 특정 값에서 이벤트를 실행시켜 주기 위해서는 항상 scroll의 값을 볼 수 있는 위치가 적절한데 이는 useEffect의 위치가 적절하다고 생각한다.
위의 두 가지가 맞물려 돌아가게 해야한다. 이 조건을 만족시키는 코드를 짜기 전에 어떻게 하면 좋을지 생각해보자.
2번에 대한 생각의 결과를 수도 코드 형태로 보자면
state.navStyle ? navOn : navOff
위와 같은 코드를 react로 구현 할 수 있다.
<div className={scrollToggle ? "NavOn" : "NavOff"}>
이런식으로 구현하면 state.scrollToggle의 값을 수시로 읽고 있다가 true, false값에 따라 다른 className을 div tag에 씌워준다. 그러면 className이 변경되고 이에 따라 css style의 값이 변경되는 형태가 된다.
styled-components를 사용해 동적 변화를 주는 것은 여러 방법들이 있지만
가장 간단한 방법을 알아보자
이 post에서는 tag의 class 혹은 id 값을 변경해 서로 다른 css를 적용받아 style의 변화를 주는 것이 핵심 내용이다. 그렇다면 css는 자연히 두 개의 css를 가지고 있을 것이다. toggle값에 따라 navOn이라는 css값과 navOff라는 값을 모두 지정해 놓았다면
& .NavOn {
...
transition: background 0.6s ease-in-out;
...
}
이런식으로 transition 효과를 사용해 간단하게 변화가 생기는 css property에 대해 시간차를 주는 것 만으로도 효과를 받을 수 있다.