개발공부 190일차 TIL React로 비 내리는 효과 구현

🧑🏻‍💻오늘 한 일 

- 프로그래머스 문제풀기

- TS강의

- 지원하기

- 이력서 수정 

⏰내일 할 일 

- 프로그래머스 문제풀기

- 운동하기

- 포트폴리오 페이지 작업 

- 지원하기

🔍 React로 비 내리는 효과 구현 

BackEffect.tsx 

import React, {useEffect,useRef} from 'react'
import { useRecoilState } from 'recoil';
import { RainToggleState } from '../atoms';
import './BackEffect.css'

const BackEffect:React.FC = () => {
    const [isRain, setIsRain] = useRecoilState(RainToggleState);
    const rainIntervalRef = useRef<number>();

    useEffect(() => {
      if(isRain){
        const createRaindrop = () => {
          const raindrop = document.createElement('div');
          raindrop.className = 'raindrop';
          raindrop.style.left = `${Math.random() * 100}vw`;
          document.body.appendChild(raindrop);
    
          setTimeout(() => {
            raindrop.remove();
          }, 1000);
        };
    
        rainIntervalRef.current = window.setInterval(createRaindrop, 100);
    
        return () => {
          clearInterval(rainIntervalRef.current);
        };
      }
      
    }, [isRain]);
  
    return <div className="rain-animation" />;
  };
    
    
export default BackEffect

BackEffect.css 

.rain-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

.raindrop {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 50px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.8) 70%,
    transparent 70%
  );
  transform: translateX(-50%);
  pointer-events: none;
  animation: fall 1.75s linear infinite;
}

@keyframes fall {
  0% {
    transform: translate(-50%, -20px);
  }
  100% {
    transform: translate(-50%, 4000px);
  }
}

---

막히는 순간도 많았지만 하나하나 해결해 나아가는 과정이 재미있어서 재밌게 코딩 했던것 같다. 

나중에 계절에 따라 이펙트로 바꾸는 작업 예정이다!