react+hooks+styledComponent :nav bar에 event와 동적 변화 부여하기

TOC

1. useEffect로 scroll event 감지하기
2. state의 변화를 감지해 style 변화시키기
3. style을 동적으로 변화시키기

1. useEffect로 scroll event 감지하기

• react는 기본적으로 js문법을 존중한다. 따라서 js를 최대한 활용해주도록 하자.
  js의 addEventListener를 사용할 것이다.

• useEffect를 통해 window.scroll의 이벤트를 감지하는 방법

addEventListener

useEffect는 component의 렌더를 감지하고 렌더가 다 진행되고 나서 이벤트를 시작시킨다. 두 번째 인자로 조건을 걸어주지 않으면 매 렌더시마다 콜백 함수를 실행시켜준다.

이 useEffect에 대해 eventListener를 걸어주도록 하자. scroll의 특정 값에서 이벤트를 실행시켜 주기 위해서는 항상 scroll의 값을 볼 수 있는 위치가 적절한데 이는 useEffect의 위치가 적절하다고 생각한다.

2.state의 변화를 감지해 style 변화 시키기

1. useEffect에 addEventListener 추가
2. state의 변화에 따라 component의 style을 변화시킬 것

위의 두 가지가 맞물려 돌아가게 해야한다. 이 조건을 만족시키는 코드를 짜기 전에 어떻게 하면 좋을지 생각해보자.

1. • 1번은 그냥 원하는 eventListener를 추가해주면 되고 콜백함수로는 무엇을 줘야할지 아직 정하지 않았다.
2. • state의 변화에 따라 style이 변경되어야 하므로 태그의 id 혹은 class 값에 조건을 걸어주는 것이 좋을것이다.

2번에 대한 생각의 결과를 수도 코드 형태로 보자면

state.navStyle ? navOn : navOff

위와 같은 코드를 react로 구현 할 수 있다.

        <div className={scrollToggle ? "NavOn" : "NavOff"}>

이런식으로 구현하면 state.scrollToggle의 값을 수시로 읽고 있다가 true, false값에 따라 다른 className을 div tag에 씌워준다. 그러면 className이 변경되고 이에 따라 css style의 값이 변경되는 형태가 된다.

3. 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에 대해 시간차를 주는 것 만으로도 효과를 받을 수 있다.