[리액트] 내비게이션 바 제작 (1)

웹 서비스시 자주 사용되는 내비게이션 바에 대해 간략하게 만들어 보려 한다. (1)

1. 스크롤시 색상이 변하는 내비게이션 바

1. Appbar.scss

Appbar의 css와 관련된 속성이다. 공부할겸 scss를 사용했는데 scss에 아직 익숙하지 않아서 적절하게 사용한지는 잘 모르겠다..

@mixin AppbarStyle{
    position: fixed;
    width: 100vw;
    height: 70px;
    text-align: center;
    font-size: 50px;
    transition: all ease 0.3s;
}
.Appbar{
    $normal-color: rgb(59, 40, 112);
    $normal-text-color: rgb(255, 255, 255);
    $active-color: rgb(223, 223, 223);
    $active-text-color: black;
    &-normal{
        background-color: $normal-color;
        color: $normal-text-color;
        @include AppbarStyle;
    }
    &-active{
        background-color: $active-color;
        color: $active-text-color;
        @include AppbarStyle;
    }
}

2. Appbar.js

렌더링될 Appbar 부분이다. scroll이 0이면 일반 내비게이션 바를, 아니라면 색상이 바뀐 내비게이션 바를 렌더링한다.

import './Appbar.scss'
import useScroll from './useScroll'
const Appbar=()=>
{
    const scrollY=useScroll()
    return(
        <div className={scrollY==0?"Appbar-normal":"Appbar-active"}>appbar</div>
    )
}
export default Appbar

3. useScroll.js

나중에 훅으로 사용될 수도 있을 것 같아 이름을 이렇게 지었는데, 일단은 브라우저의 scrollY를 받아오는 함수로 사용된다.

import {useState,useEffect} from 'react'
const useScroll=()=>
{
    const [scrollY,setScrollY]=useState(0)
    const handleScroll=()=>
    {
        setScrollY(window.scrollY)
    }
    useEffect(()=>{
        window.addEventListener('scroll', handleScroll)
        return ()=>{
            window.removeEventListener('scroll',handleScroll)
        }
    },[])
    return scrollY
}
export default useScroll