Netflix 클론코딩 기록 남기기 (7) - Tailwind CSS를 통한 동적 디자인

예를 들어 어떤 버튼을 클릭할 때마다 노란색, 파란색으로 배경이 변해야 하는 경우가 있다고 하자. 그러면 나는 이때까지는 JS의 도움을 통해서 혹은 react에서 관리하는 state를 css-in-js 코드로 넘겨주어 css에서 해당 state 따라 배경색이 지정되도록 코드를 작성했다 ( 사실 주로 후자의 경우를 선호했다. ) 이번에 처음으로 Tailwind CSS를 활용하면서 좋은 기능을 알 수 있었다. 배경색과 같은 CSS코드 즉 디자인 코드를 동적으로 조절하기 쉬운 방법이 있다는 것을 알 수 있었다!

 

scroll을 가장 위에 두었을때는 상단 메뉴바의 배경색이 없어지도록 하였다.

scroll이 최상단에 있지 않은 경우에는 상단 메뉴바의 배경색을 지정해주었다.

 

아래와 같은 코드를 통해 위 상단바의 디자인 코드를 작성할 수 있었다.

const TOP_OFFSET = 66;

const Navbar = () => {
	const [backgroundvisible, setBackgroundVisible] = useState(false);
    
    useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY >= TOP_OFFSET) {
                setBackgroundVisible(true);
            }   else {
                setBackgroundVisible(false);
            }
        };

        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        }
    }, []);
    
    return (
    	<div className={`${backgroundvisible ? 'bg-zinc-900' : ''}`}></div>
    );
};

export default Navbar;

 

window에서의 scroll좌표는 우리가 학생때 보던 xy좌표축과는 방향이 다르게 y축이 밑으로 갈수록 커진다. 그래서 나는 scroll값이 지정한 TOP_OFFSET 값보다 크다면 배경값을 지정해 주었고, 아니라면 배경이 생기도록 하였다. 위에서 <div> 태그 안에 작성한 간단한 Tailwind CSS 코드를 통하여 디자인을 동적으로 조절할 수 있다!!